嵌套数据驱动模板答案

【问题标题】：nested data driven template嵌套数据驱动模板
【发布时间】：2016-12-13 08:51:17
【问题描述】：

我有嵌套地址组件，我想在我的外部表单中重用它，它工作正常但问题是当我想要重复地址（add() 按钮）时

你可以检查一下这个插件，https://plnkr.co/edit/b0NQcgY1Vk0aKNITxC8A?p=preview我的 push() 似乎不起作用，我不明白为什么，有人可以在这里帮忙更新这个插件

 ngOnInit() {
    this.form = this.fb.group({
      title: [''],
      address: this.fb.array([])
    });
  }

  add(){

    this.form.get('address').push(this.fb.control(this.adress.form))
  }

模板是

<address-control *ngFor="let control of form.get('address').controls; let i = index" formGroupName="{{i}}"></address-control>

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

这可能是因为this.adress.form应该是：this.form.adress。

试试这个：

add(){
  this.form.get('address').push(this.fb.control(this.form.adress))
}

希望这会有所帮助。

【讨论】：

不，这无济于事，您可以在此处查看更新plnkr.co/edit/U5RALchHfEL0r1Jck8Yb?p=preview，但我不明白为什么 this.form.adress 如果我想从我的 ViewChild this.adress.form 中获取表格...您可以分叉我的笨蛋，让我知道你的意思

【解决方案2】：

我相信这里需要的是通过函数跟踪*ngFor，以防止它在任何时候进行更改时重新初始化我们的组件，并在初始化地址组件时结合setControl和一个额外的输入以便我们可以设置正确的控件：

main.component.html

 <div formArrayName="addresses">
    <address-control [formArrayInput]="form.controls['addresses']" [index]="i"
      *ngFor="let address of form.controls['addresses'].controls; let i = index;trackBy:trackByFn"></address-control>
  </div>

main.component.ts 我们将推送一个虚拟组以被地址组件覆盖：

add(){
   this.form.controls['addresses'].push(this.fb.group({}));
}

trackByFn(index, item) {
   return 0;
}

address-control.component.ts

@Input() formArrayInput;
@Input() index;
form;

ngOnInit() {
  console.log(this.formArrayInput);
  this.form = this.fb.group({
    street: '',
    city: ''
    zip: ''
  });
  this.formArrayInput.setControl(this.index, this.form);
}

这是从你的Plunker 分叉出来的。

【讨论】：