Angular form validation - how to enable input from an ng template?

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.

+4
source share

Source: https://habr.com/ru/post/1688869/


All Articles