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

Mohammedmohammedan

Answer 1

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

Dialecticism