Angular 5.2.0动态FormArray新增控件值未同步问题咨询

我之前在Angular 5.2.x版本开发时也碰到过一模一样的FormArray异常行为，结合你贴的代码来看，这是该版本Form组件在脏值检查和动态控件同步逻辑上的一个已知问题。

问题复现 #

你给出的初始化代码是这样的：

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]
  });
}

当你动态往hobbies这个FormArray里新增控件时，这些新控件的值不会立刻同步到表单对象中，只有当第一个初始化的控件被标记为touched（比如点击输入框再离开）后，所有动态新增控件的值才会被正确纳入表单值里。

解决方案 #

针对这个版本的问题，有几个可行的解决办法：

• 手动触发FormArray的状态更新
  在新增动态控件的方法里，手动标记FormArray为脏或触碰状态，强制触发表单的值同步：

  addHobby() {
    const hobbiesArray = this.form.get('hobbies') as FormArray;
    hobbiesArray.push(this.getRow());
    // 手动标记数组状态，触发值同步
    hobbiesArray.markAsDirty();
    hobbiesArray.markAsTouched();
  }
  

• 初始化时主动触发表单更新
  在组件初始化完成后，调用updateValueAndValidity()方法让表单完成一次完整的值同步：

  ngOnInit(){
    this.form = this.formBuilder.group({
      name:[null],
      description:[null],
      hobbies:this.formBuilder.array([this.getRow()])
    });
    // 初始化后强制触发值更新
    this.form.get('hobbies').updateValueAndValidity({ emitEvent: true });
  }
  

• 确保模板绑定的正确性
  模板里绑定动态控件时，一定要通过FormArray的controls属性获取正确的控件引用，避免绑定到非表单对象上：

  <div [formGroup]="form">
    <input formControlName="name" placeholder="Name">
    <input formControlName="description" placeholder="Description">
    
    <div formArrayName="hobbies">
      <div *ngFor="let hobby of hobbies.controls; let i = index" [formGroupName]="i">
        <input formControlName="hobby" placeholder="Hobby">
        <input formControlName="description" placeholder="Hobby Description">
      </div>
      <button (click)="addHobby()">Add New Hobby</button>
    </div>
  </div>
  

  同时在组件里添加对应的getter方便模板调用：

  get hobbies(): FormArray {
    return this.form.get('hobbies') as FormArray;
  }
  

另外补充一句：这个问题在Angular 6.0及以上的版本已经被官方修复了，如果你的项目有升级空间，直接升级到更高版本是最彻底的解决方式。

内容的提问来源于stack exchange，提问作者isawk