Angular 中的 FormGroup

Question

在 Angular 中， FormGroup 是构建和管理表单结构的核心概念之一。它是 Reactive Forms 模块的一部分，用于将多个 FormControl （表单控件）组合在一起，以便更好地组织和管理表单数据。

1. 什么是 FormGroup？

FormGroup 是一个容器，它包含多个子控件（ FormControl 或嵌套的 FormGroup ）。它允许我们将表单的多个控件进行分组，并通过一个统一的对象来管理它们的值、状态和验证。

2. 创建 FormGroup

使用 FormGroup 可以非常方便地构建复杂的表单。可以通过以下两种方式来创建一个 FormGroup ：

方法 1：手动创建

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-registration-form',
  template: `
    <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
      <div>
        <label for="name">Name:</label>
        <input id="name" formControlName="name" />
      </div>

      <div>
        <label for="email">Email:</label>
        <input id="email" formControlName="email" />
        <div *ngIf="registrationForm.get('email')?.errors?.['email']">Invalid email format.</div>
      </div>

      <div formGroupName="address">
        <h3>Address</h3>
        <label for="city">City:</label>
        <input id="city" formControlName="city" />

        <label for="postalCode">Postal Code:</label>
        <input id="postalCode" formControlName="postalCode" />
      </div>

      <button [disabled]="registrationForm.invalid">Submit</button>
    </form>
  `
})
export class RegistrationFormComponent {
  registrationForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    address: new FormGroup({
      city: new FormControl(''),
      postalCode: new FormControl(''),
    }),
  });

  onSubmit() {
    console.log(this.registrationForm.value);
  }
}

在这个例子中，我们使用 FormGroup 嵌套结构来管理一个表单，其中包括用户的 name 、 email 以及 address 信息。

方法 2：使用 FormBuilder

使用 FormBuilder 服务可以更简洁地创建 FormGroup 。推荐使用这种方法，因为它更简短并且易于管理。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-registration-form',
  template: `
    <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
      <!-- 表单内容同上 -->
    </form>
  `
})
export class RegistrationFormComponent {
  registrationForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registrationForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      address: this.fb.group({
        city: [''],
        postalCode: [''],
      }),
    });
  }

  onSubmit() {
    console.log(this.registrationForm.value);
  }
}

使用 FormBuilder 服务创建表单时，可以更直观地定义表单结构，并且减少了代码量。

3. 常用属性和方法

• value ：获取当前表单组中所有控件的值。
• controls ：一个对象，包含 FormGroup 中所有子控件的引用。
• valid ：如果表单组中所有控件都通过验证，则返回 true 。
• invalid ：如果表单组中至少一个控件未通过验证，则返回 true 。
• get(path: string) ：通过路径字符串访问某个子控件。
• setValue(value: any) ：严格更新 FormGroup 的值，必须包含所有控件的值。
• patchValue(value: any) ：部分更新 FormGroup 的值，只需包含需要更新的控件的值。

4. 验证状态

FormGroup 还可以检测和管理子控件的验证状态。例如：

console.log(this.registrationForm.valid); // 检查整个表单是否有效
console.log(this.registrationForm.get('email')?.errors); // 获取特定控件的错误

小结

• FormGroup 是 Angular 中用于管理多个表单控件的核心工具。
• 可以使用手动创建或者 FormBuilder 来定义表单结构。
• 提供了一些常用的方法和属性来获取、设置、验证和管理表单数据。

使用 FormGroup 可以让你轻松管理复杂表单的数据结构和验证逻辑，使表单处理更加简洁、可维护。