我有一个包含两个字段的模板，例如姓名和年龄，需要克隆并附加到同一个容器.我使用以下代码实现了这一点.
html 文件
<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></ng-模板><div>某些元素</div><form #myForm="ngForm" novalidate (ngSubmit)="save(myForm)"><div #container>
<button type="submit">提交</button></表单><button (click)="gettemplate()">添加模板</button><pre>{{myForm.value |json}}</pre>
TS 文件
@ViewChild('container', { read: ViewContainerRef }) _vcr;@ViewChild('tpl') tpl;获取模板(){this._vcr.createEmbeddedView(this.tpl);}保存(表单值:NgForm){控制台日志(表单值.值)；}但是我在提交表单后没有获得表单值，而且我还需要在单击删除"按钮时删除克隆的元素.
这是预期行为，因为您在 ng-template 中定义的所有 ngModel 都不是 <form #myForm= 的一部分"ngForm" 因为 angular 有分层依赖注入系统.
我可以在这里为您提供两种选择:
1) 将 ng-template 移动到 form 标签内
<div #container></div><button type="submit">提交</button><ng-模板#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></ng-模板></表单>
2) 在您的组件上明确提供 ControlContainer:
import { NgForm, ControlContainer } from '@angular/forms';导出函数 controlContainerFactory(component: AppComponent) {返回 component.ngForm;}@成分({选择器:'我的应用'，模板网址:`./app.component.html`，视图提供者:[{提供:ControlContainer，使用工厂:控制容器工厂，依赖:[AppComponent]}]})导出类 AppComponent {...@ViewChild('myForm') ngForm: NgForm;...}另见
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
这篇关于无法在 Angular4 中提交克隆元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！