Angular2 反应式表单：将 FormArray 与父 FormGroup 同步

typescript

如何使用Angular2的反应式表单来实现FormArray与父FormGroup的同步

在Angular2中，表单是一个非常重要的部分，用于收集和验证用户的输入。Angular2提供了两种类型的表单：模板驱动表单和反应式表单。反应式表单是一种更加灵活和强大的方式来处理表单，它允许我们以编程的方式创建表单，并且可以更好地处理复杂的表单结构。

在本文中，我们将重点介绍如何使用反应式表单来同步FormArray与父FormGroup。FormArray是一个由多个FormControl组成的数组，它可以用于处理动态的表单控件集合。父FormGroup是一个包含多个表单控件的容器，它可以将FormArray作为其子控件之一。

创建FormArray

首先，我们需要创建一个FormArray。我们可以使用FormGroup的构造函数来创建一个空的FormArray，并将其赋值给父FormGroup的一个属性。例如，我们可以在父组件的构造函数中添加以下代码：

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: <code>
    <form [formGroup]="parentForm">
      <div formArrayName="children">
        <div *ngFor="let child of children.controls; let i = index" [formGroupName]="i">
          <input formControlName="name">
        </div>
      </div>
    </form>
  </code>
})
export class AppComponent {
  parentForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.parentForm = this.fb.group({
      children: this.fb.array([])
    });
  }
  get children() {
    return this.parentForm.get('children') as FormArray;
  }
}

在上面的代码中，我们使用FormBuilder来创建一个空的FormArray，并将其赋值给父FormGroup的children属性。在模板中，我们使用formArrayName指令来告诉Angular我们要使用children属性。然后，我们使用*ngFor指令来循环遍历children.controls，并使用formGroupName指令将每个子控件与FormArray的索引关联起来。

添加子控件

接下来，我们将介绍如何向FormArray添加子控件。我们可以使用FormArray的push方法来添加一个新的FormControl到FormArray中。例如，我们可以在父组件中添加以下方法来处理添加子控件的逻辑：

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: <code>
    <form [formGroup]="parentForm">
      <div formArrayName="children">
        <div *ngFor="let child of children.controls; let i = index" [formGroupName]="i">
          <input formControlName="name">
        </div>
      </div>
      <button (click)="addChild()">Add Child</button>
    </form>
  </code>
})
export class AppComponent {
  parentForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.parentForm = this.fb.group({
      children: this.fb.array([])
    });
  }
  get children() {
    return this.parentForm.get('children') as FormArray;
  }
  addChild() {
    const childForm = this.fb.group({
      name: ['']
    });
    this.children.push(childForm);
  }
}

在上面的代码中，我们添加了一个按钮，当点击按钮时调用addChild方法。在addChild方法中，我们创建一个新的子控件的FormGroup，并将其添加到FormArray中。

同步FormArray与父FormGroup

最后，我们将介绍如何同步FormArray与父FormGroup。当我们向FormArray添加或删除子控件时，我们需要手动更新父FormGroup的值。我们可以使用FormArray的valueChanges或statusChanges属性来监听FormArray的变化，并在变化发生时更新父FormGroup的值。例如，我们可以在父组件中添加以下代码：

typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: <code>
    <form [formGroup]="parentForm">
      <div formArrayName="children">
        <div *ngFor="let child of children.controls; let i = index" [formGroupName]="i">
          <input formControlName="name">
        </div>
      </div>
      <button (click)="addChild()">Add Child</button>
    </form>
  </code>
})
export class AppComponent implements OnInit {
  parentForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.parentForm = this.fb.group({
      children: this.fb.array([])
    });
  }
  get children() {
    return this.parentForm.get('children') as FormArray;
  }
  addChild() {
    const childForm = this.fb.group({
      name: ['']
    });
    this.children.push(childForm);
  }
  ngOnInit() {
    this.children.valueChanges.subscribe(() => {
      this.parentForm.updateValueAndValidity();
    });
  }
}

在上面的代码中，我们在ngOnInit方法中订阅了FormArray的valueChanges事件，并在变化发生时调用parentForm的updateValueAndValidity方法来更新父FormGroup的值。

通过使用Angular2的反应式表单，我们可以很容易地实现FormArray与父FormGroup的同步。我们可以使用FormBuilder来创建和操作FormArray，并使用valueChanges或statusChanges来监听FormArray的变化并更新父FormGroup的值。这种方式非常灵活和强大，可以处理复杂的表单结构。

希望本文对你了解如何使用Angular2的反应式表单来实现FormArray与父FormGroup的同步有所帮助。如果你有任何问题或疑问，请随时在下方留言。