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.
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>
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;
...
}
See also
来源:https://stackoverflow.com/questions/46849570/cloned-elements-cannot-be-submitted-in-angular4