This is the intended behavior because all the ngModel you define internally ng-template
are not part <form #myForm="ngForm"
, because angular has a hierarchical dependency injection system.
I can offer you two options:
1) move ng-template
inside the tagform
<form #myForm="ngForm" novalidate (ngSubmit)="save(myForm)">
<div #container></div>
<button type="submit">Submit</button>
<ng-template #tpl>
<div class="form-group">
<input type="text" id="name" class="form-control" name="name" ngModel
#name="ngModel">
<input type="text" id="age" class="form-control" name="age" ngModel
#age="ngModel">
<button type="Button" >Remove</button>
</div>
</ng-template>
</form>
Stackblirz example
2) ControlContainer
:
import { NgForm, ControlContainer } from '@angular/forms';
export function controlContainerFactory(component: AppComponent) {
return component.ngForm;
}
@Component({
selector: 'my-app',
templateUrl: `./app.component.html`,
viewProviders: [
{
provide: ControlContainer,
useFactory: controlContainerFactory,
deps: [AppComponent]
}
]
})
export class AppComponent {
...
@ViewChild('myForm') ngForm: NgForm;
...
}
Stackblitz
.