inputs are not considered in form validation when using ng-content

Question

Given the following component (with selector my-template):

<form #theForm="ngForm">
    <ng-content></ng-content>
</form>

and use it like this:

<my-template>
    <input type="text" required name="firstName" [(ngModel)]="firstName"/>
</my-template>

The form is always valid - even though the input is invalid. How can I make this work so that the form is invalid when the input is invalid?

Live demo: https://plnkr.co/edit/lWUe6oeBk6ccsE2JxNKb?p=preview

score 1 · Answer 1 · answered Dec 13 '16 at 15:00

Just for test purposes, try to change your form template to:

<form #theForm="ngForm">
    <input type="text" required name="lastName" [(ngModel)]="lastName"/>
    <ng-content></ng-content>
</form>

You will see, that form becomes invalid when lastName is invalid. Which means that FormComponent processes own HTML elements fields before ng-content is rendered. I.e. you have to update FormControls after template is rendered.

Please read this topic Dynamic Form for more information

inputs are not considered in form validation when using ng-content

1 Answers1