Cloned elements cannot be submitted in Angular4

Question

I have a template with two fields for.eg name and age, that needs to cloned and appended to the same container. I achieved this using the following code.

html file

<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>
<div>Some element</div>
<form #myForm="ngForm" novalidate (ngSubmit)="save(myForm)">
<div #container>

</div>
<button type="submit">Submit</button>
</form>
<button (click)="gettemplate()">Add Template</button>

<pre>{{myForm.value | json}}</pre>

---

TS file

@ViewChild('container', { read: ViewContainerRef }) _vcr;
@ViewChild('tpl') tpl;

 gettemplate(){
  this._vcr.createEmbeddedView(this.tpl);
}
save(formvalue:NgForm){
   console.log(formvalue.value);
}

but I did not get the form values after submitting the form and also I need to remove the cloned elements on clicking Remove button.

Answer 1

This is intended behavior because all ngModel's you defined inside ng-template are not part of <form #myForm="ngForm" since angular has hierarchical dependency injection system.

I can offer you two options here:

1) move ng-template inside form tag

<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) provide ControlContainer explicity on your component:

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 example

See also

• Angular2 nested template driven form