克隆的元素不能在 Angular4 中提交

Question

我有一个模板，其中包含两个字段，例如姓名和年龄，需要克隆并附加到同一个容器中。我使用以下代码实现了这一点。

html文件

<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 文件

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

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

但是在提交表单后我没有得到表单值，而且我需要在单击删除按钮时删除克隆的元素。

Answer 1

这是预期行为，因为您在 ng-template 中定义的所有 ngModel 都不属于 <form #myForm="ngForm"，因为 Angular 具有分层依赖注入系统。

我可以在这里为您提供两种选择：

1) 将ng-template 移动到form 标签内

<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 example

另见

• Angular2 nested template driven form