Question

注意到angular5表单使用构建器构造一个包含捕获其他动态数据所需的表单数组的表单的奇怪行为，表单数组值仅在

时更新

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

Angular版本5.2.0 Experimental/Sample Code Here

Point 1/2 Addendum

更改似乎仅在未动态添加到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]
    });
  }

虽然很明显，在创建的附加控件中，它们都是空的

然而，只要触摸了第一个元素（注意到从钓鱼到钓鱼的变化4，控制台输出现在具有剩余动态添加控件的值），所有新的动态字段值都会被传播

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属性发生重大更改的情况下进行证明。

Answer 2

在你的html更改中：

<form [formGroup]="form.controls.hobbies">

和

  <tr *ngFor="let hobby of form.get('hobbies').controls; let r=index;" [formGroupName]="r">
     <td><input type="text" formControlName="hobby"></td>
     <td><input type="text" formControlName="description"></td>
  </tr>

by：

<div formArrayName="hobbies">
    <div *ngFor="let hobby of form.get('hobbies').controls; let r=index;">
        <div [formGroupName]="r">
             <td><input type="text" formControlName="hobby"></td>
             <td><input type="text" formControlName="description"></td>
        </div>
    </div>
</div>

查看这篇文章：

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

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

2 个答案: