Question

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

你可以查看这个plunker，https://plnkr.co/edit/b0NQcgY1Vk0aKNITxC8A?p=preview我的推送（）似乎不起作用，我不明白为什么，有人可以帮助更新这个plunker

 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

我相信这里要求的是按功能跟踪*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;
}

<强>地址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分叉。

嵌套数据驱动模板

2 个答案: