Dynamic From FormArray 新添加的控件更改未传播

Question

注意到 angular5 表单的奇怪行为，使用构建器构建一个表单，其中包含捕获附加动态数据所需的表单数组，表单数组值仅在以下情况下更新：

1. 在创建过程中初始表单控件添加到表单数组this.formBuilder.array(this.getRow())
2. 当第一个初始控件被触摸时

Angular 版本 5.2.0 实验/示例代码在这里

第 1/2 点附录

更改似乎仅在未动态添加到 FormArray 的组件上注册

表单数组元素包含初始化过程的代码

  ngOnInit(){
    this.form = this.formBuilder.group({
      name:[null],
      description:[null],
      hobbies:this.formBuilder.array([this.getRow()])
    });
  }

  getRow():FormGroup{
    return this.formBuilder.group({
      hobby:[null],
      description:[null]
    });
  }

尽管很明显创建了额外的控件，但它们都是空的

然而，一旦触摸第一个元素（注意到从 Fishing 到 Fishing4 的变化，并且控制台输出现在具有剩余动态添加控件的值），所有新的动态字段值都会传播

Answer 1

我遇到了与您相同的问题，就像您在评论中提到的那样，问题是我正在将新控件推送到表单数组的 .controls 属性上。

所以而不是

this.form.controls.xxx.controls.push(this.formBuilder.group(getGroup()));

你应该去

this.form.controls.xxx.push(this.formBuilder.group(getGroup()));

稍后编辑： 使用属性导航嵌套表单controls并不能实现最安全的 Angular 更新。如果他们决定在未来的 Angular 更新中不再命名该属性controls，您将需要更改大量代码。

所以代替我以前的代码：

this.form.controls.xxx.push(this.formBuilder.group(getGroup()));

你应该使用

this.form.get('xxx').push(this.formBuilder.group(getGroup()));

这使您的代码更加清晰，并且可以在对属性进行任何重大更改的情况下为未来提供证明controls。