嵌套的数据驱动模板

Question

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

你可以检查这个柱塞，我的推送()似乎不工作，我不明白为什么，有人可以在这里更新这个柱塞

 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>

Answer 1

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

试试这个：

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

希望这能有所帮助。

Answer 2

我相信这里需要的是用一个虚拟的track by函数来跟踪*ngFor，以防止它在任何时候进行更改时重新初始化我们的组件，并在初始化address组件时结合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我们将推送一个虚拟组，它将被address组件覆盖：

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派生的。