3

注意到 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 的变化，控制台输出现在具有剩余动态添加的控件的值），所有新的动态字段值都会传播

在此处输入图像描述

4

2 回答 2

4

我和你有同样的问题，就像你在评论中提到的那样，问题是我正在推动表单数组的 .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这使您的代码更清晰，并且在对属性进行任何重大更改的情况下对其进行验证。

于 2019-08-28T12:55:33.503 回答
0

在您的 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>

经过： 

<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

于 2018-01-14T05:37:01.613 回答