Angular Form Validation - How to include input from ng-template?

Question

In a template-driven form I have two inputs. The second one comes from a 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 'required' attribute, but form gets valid although the second input is empty.

Is there a way to ensure the input from the template is recognized by the form?

Demo: Plunker

Edit: In my real application, ng-template comes from another (3rd party) component and is loaded using template reference, see this Plunker.

I only found some solutions regarding parent-child component problems, but these were not practicable in this case.

Answer 1

You cannot do that as an ng-template does not support @Inputs and @Outputs. I suggest you create a custom input component. Implement the ControlValueAccessor to achieve this - it will let you bind ngModel, set value, etc.

Answer 2

Put ng-template#inputTemplate in the form, then it will work.

<form #testForm="ngForm">
    First name <input type="text" name="firstName" [(ngModel)]="firstName" required> (required)
    <br>
    <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>

    <ng-template #inputTemplate>
    Last name <input type="text" name="lastName" [(ngModel)]="lastName" required> (required)
    </ng-template>
</form>