Angular FormGroup - 简介与使用

简介

Angular FormGroup 是 Angular 中一个表单相关的核心组件，用于构建复杂的表单，管理表单数据和验证表单。FormGroup 提供了一种组织方式来将表单中的输入控件分组，并且可以对组中的控件进行组合校验。

表单在 web 应用中扮演着重要的角色，因此在 Angular 中，我们通过依赖注入的方式来引入 FormGroup 并使用它来构建我们的表单。FormGroup 和其它表单相关的组件（如 FormControl、FormGroup、FormBuilder 等）一起构成了 Angular 表单的核心。

使用方法

1. 引入 FormGroup

在 Angular 程序中使用 FormGroup，需要在组件的头部引入相应的 FormGroup 相关的依赖。例如，需要在组件头部中添加以下代码：

// 引入 FormGroup 相关依赖
import { FormGroup } from '@angular/forms';

2. 创建 FormGroup

创建一个 FormGroup 的过程中，需要使用 new 运算符来实例化一个 FormGroup。在初始化 FormGroup 时，可以给它传递一个对象，该对象的属性会对应 FormGroup 中的表单控件。例如，以下代码创建了一个名为 myForm 的 FormGroup，包含了 firstName 和 lastName 两个控件：

// 新建一个 FormGroup，并将 firstName 与 lastName 控件加入 FormGroup 中
let myForm = new FormGroup({
  firstName: new FormControl(),
  lastName: new FormControl()
});

3. 使用 FormGroup

在使用 FormGroup 时，除了初始化时通过构造函数传入的方式，还可以通过对象字面量的方式在后续添加控件到 FormGroup 中。例如， Following example shows how to add more form controls to the previously created FormGroup instance:

// 创建一个 FormGroup
let myForm = new FormGroup({
  firstName: new FormControl('John'),
  lastName: new FormControl('Doe')
});

// 在后续添加更多的控件
myForm.addControl('email', new FormControl());

4. 组合 FormControl 和 FormGroup

FormGroup 可以使用 FormGroup 的 addControl() 方法来添加 FormControl 或 FormGroup 实例。例如，以下代码为 FormGroup 添加了一个名为 address 的 FormGroup，其中包含了 street、city 和 zipCode 三个 FormControl：

// 创建一个 FormGroup
let myForm = new FormGroup({
  firstName: new FormControl('John'),
  lastName: new FormControl('Doe'),
  address: new FormGroup({
    street: new FormControl(),
    city: new FormControl(),
    zipCode: new FormControl()
  })
});

5. 表单校验

FormGroup 可以将其包含的表单控件组合起来进行表单校验。可以使用 FormGroup 的 setValidators() 方法来给 FormGroup 、FormControl 或者 FormGroup 的某个子 FormGroup 或 FormControl 添加校验器。例如，以下代码为 FormGroup 的两个控件分别添加了必填项和最小长度校验器：

// 创建一个 FormGroup 并添加必填项和最小长度校验器
let myForm = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.minLength(3))
});

6. 获取 FormGroup 中表单控件的值

可以使用 FormGroup 的 getRawValue() 方法获取 FormGroup 中所有表单控件的值。例如：

// 获取 FormGroup 中所有表单控件的值
let formValue = myForm.getRawValue();

总结

Angular FormGroup 是一个重要的表单管理组件，使用 FormGroup 构建表单可以让我们更加方便地管理表单数据和校验表单控件，从而更加高效地开发应用。在本文中，我们已经介绍了如何创建 FormGroup、给表单添加控件、设置控件校验器以及获取表单中控件的值。希望本文能够帮助您更好地理解和使用 FormGroup。