Angular响应式表单及表单验证

1. 什么是响应式表单？

响应式表单提供了一种模型驱动的方式来处理表单输入，其中的值会随时间而变化。

响应式表单使用显示的，不可变的方式，管理表单在特定时间点上的状态。对表单状态的每一次变更都会返回一个新的状态，这样可以在变化时维护模型的整体性。

—— Angular文档

---

2. 响应式表单的使用

2.1 单个表单控件

FormControl的实例可以跟踪独立表单控件的值和验证状态。

2.1.1 使用步骤(示例)

步骤1: 在module.ts中导入ReactiveFormsModule模块¹。

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ],
})
export class AppModule { }

步骤2: 在组件类导入FormControl类²，并创建一个FormControl实例。

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms'; // 导入FormControl

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  // 创建FormControl实例
  name = new FormControl('');

  constructor() { }

  ngOnInit() {
  }

}

步骤3: 在模板中注入该控件

<label>
  FormControl测试:<input nz-input [formControl]="name" placeholder="输入测试信息">
</label>
<label>
  输入的测试信息为:{{name.value}}
</label>

若想设置表单控件的值，可以使用FormControl提供的 setValue() 方法。

2.2 表单控件分组

FormGroup实例可以跟踪一组 FormControl 实例的值和有效性状态。
当创建FormGroup时，其中的每一个控件都会根据其名字进行跟踪。

2.2.1 使用步骤(示例)

步骤1：创建FormGroup实例

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'; // 导入FormControl和FormGroup类

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
	// 创建FromGroup实例
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

FormGroup 实例拥有和 FormControl 实例相同的属性（比如 value、untouched）和方法（比如 setValue()）。

步骤2：关联FormGroup的模型与视图
这个表单组跟踪其中每个控件的状态和值变化，所以如果其中的某个控件的状态或值变化了，父控件会发出一次新的状态变更或值变更事件。

该控件组的模型来自于它的所有成员。在定义了这个模型之后，必须更新模板，来把该模型反映到视图中。

<form [formGroup]="profileForm">
  
  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

解释：

模型中创建的FormGroup实例通过FromGroup指令绑定到form元素上，在该模型和表单中的输入框之间创建一个通讯层。

由FormControlName指令提供的formControlName属性把每个输入框和FormGroup中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯，它们还把更改传递给FormGroup，这个FormGroup是模型值的权威数据源。

2.2.2 保存表单数据

组件从用户那里获得输入，但在真实的场景中，你可能想要先捕获表单的值，等将来在组件外部进行处理。

FormGroup 指令会监听 form 元素发出的 submit 事件，并发出一个 ngSubmit 事件，用来绑定一个回调函数。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

组件类中的onSubmit()方法会捕获FromGroup示例(这里即profileForm)的当前值。

要保持该表单的封装性，就要使用EventEmitter向组件外部提供该表单的值。

获取表单的值用：this.profileForm.value

form 标签所发出的 submit 事件是原生 DOM 事件，通过点击类型为 submit 的按钮可以触发本事件。

<button type="submit">Submit</button>

2.3 使用FormBuilder来生成表单控件

2.3.1 使用步骤(示例)

步骤1: 导入FormBuilder类

import { FormBuilder } from '@angular/forms';

步骤2: 注入FormBuilder服务

constructor(private fb: FormBuilder) { }

步骤3: 生成表单控件

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

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });

  constructor(private fb: FormBuilder) { }
}

注意：这里使用group()方法来定义属性，每个控件名对应的值都是一个数组，这个数组中的第一项是其初始值，第二项和第三项提供同步和异步验证器。

在上面的描述中，已经为表单创建了表单控件，下面结合验证器来进行表单验证。

2.4 表单验证

响应式表单包含了一组开箱即用的常用验证器函数。这些函数接收一个控件，用以验证并根据验证结果返回一个错误对象或空值。

步骤1： 创建表单控件
步骤2： 导入 验证器函数

import { Validators } from '@angular/forms';

步骤3： 添加验证器静态方法
将验证器静态方法设置为表单控件值数组的第二项。

验证器静态方法如下：

• Validators.min(n)：该验证器要求控件值最小值为n(n为数字)。
• Validators.max(n)：该验证器要求控件值最大值为n(n为数字)。
• Validators.required：该验证器要求控件具有非空值，即该控件所表示的字段必填。
• Validators.minLength(n)：该验证器要求控件值的最小长度为n(n为数字)。
• Validators.maxLength(n)：该验证器要求控件值的最大长度为n(n为数字)。
• ……

详细的验证器静态方法请查阅 官方文档-Validators。

---

1. ReactiveFormsModule包含响应式表单所需要的基本设施和指令。 ↩︎

2. 当使用响应式表单时，FormControl 类是最基本的构造块，它能跟踪独立表单控件的值和验证状态。 ↩︎