Angular 8：如何使用 Forms 模块进行表单验证-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 应用的开发中，表单是必不可少的一部分。表单的验证是确保用户输入的数据正确性的重要手段。为此，Angular 提供了一个强大的 Forms 模块，可以灵活地进行表单验证。

Forms 模块简介

Forms 模块一般称为 Reactive Forms 或者 Model-Driven Forms。这个模块基于响应式编程的思想，通过建立表单数据模型，集中管理表单字段的值和状态，并提供一系列的验证器。相比于 Template-Driven Forms，Reactive Forms 可以更好地管理更加复杂的表单。

Forms 模块的基本概念

在 Reactive Forms 中，表单通过 FormGroup 和 FormControl 来进行建模。

FormGroup 是表单的根控件，在一个表单中其一般对应一个 FormGroup。
FormControl 是表单的一个控件，其可以为表单模型进行赋值。
表单模型则是 FormGroup 和 FormControl 的组合。

Forms 模块的表单验证

Forms 模块提供了许多内置的验证器，比如：

required: 必填项；
email: 邮箱格式；
maxLength: 最大输入长度；
minLength: 最小输入长度；
pattern: 正则表达式验证等。

除了内置的验证器，我们还可以自定义一些验证器。

表单验证的实现

在实现表单验证前，需要在模块中添加 ReactiveFormsModule。步骤如下：

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

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})

接下来，我们就可以开始实现表单验证。

创建表单模型

表单模型是 FormGroup 和 FormControl 的组合。下面的示例是一个包含用户名和邮箱的表单模型。

this.form = new FormGroup({
  name: new FormControl('', [Validators.required]),
  email: new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')
  ]),
})

在这个例子中：

form 表示整个表单模型；
name 和 email 分别表示表单中的两个控件；
FormControl 的第一个参数是对应表单控件的初始值；
第二个参数是验证器的数组。

在模板中使用表单模型

在模板中绑定表单模型很简单，只需要通过 formControlName 指令将表单模型中的 FormControl 绑定到对应的表单控件即可。

// javascriptcn.com 代码示例
<form [formGroup]="form">
  <div>
    <label for="name">用户名：</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="form.get('name').invalid && (form.get('name').dirty || form.get('name').touched)">
      <div *ngIf="form.get('name').errors.required">用户名为必填项</div>
    </div>
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="text" id="email" formControlName="email">
    <div *ngIf="form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)">
      <div *ngIf="form.get('email').errors.required">邮箱为必填项</div>
      <div *ngIf="form.get('email').errors.pattern">请输入正确的邮箱格式</div>
    </div>
  </div>
</form>

在这个例子中，我们通过 formControlName 指令将表单控件与表单模型中的 FormControl 进行绑定，并且根据表单的验证状态来显示相应的错误信息。

注意事项

在表单验证时，一定要考虑用户输入的所有情况，做好充分的测试。
尽量为每个表单控件加上合适的提示信息，以便用户更好地理解输入要求和错误提示。

总结

本文简单介绍了 Angular 8 中 Forms 模块的表单验证功能，并通过示例代码展示了表单的创建以及表单验证的实现。Forms 模块是 Angular 中一个非常强大的模块，开发者可以通过它，灵活地进行表单验证。但是在实现表单验证时，一定要考虑到用户输入的各种情况，并且为每个表单控件加上合适的提示信息。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654dbccb7d4982a6eb724628