In a template driven form, I have two inputs. The second is from the ng template.
<form #testForm="ngForm">
First name <input type="text" name="firstName" [(ngModel)]="firstName" required> (required)
<br>
<ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
</form>
The InputTemplate looks like this:
<ng-template #inputTemplate>
Last name <input type="text" name="lastName" [(ngModel)]="lastName" required> (required)
</ng-template>
Both inputs have the attribute "required", but the form becomes valid, although the second input is empty.
Is there a way to ensure that the input from the template is recognized by the form?
Demo: Plunker
Edit: in my real application, the ng template comes from another (third-party) component and is loaded using the template link, see this Plunker .
I found several solutions regarding problems with parent and child components, but in this case it was almost impossible.
fxmfr source
share