Angular 表单验证的基本使用教程-JavaScript中文网-JavaScript教程资源分享门户

Angular 是一个流行的前端框架，它提供了很多强大的工具，其中包括表单验证。表单验证是一个前端开发中非常重要的功能，因为它能够确保用户输入的数据是有效和正确的。在本文中，我们将介绍 Angular 表单验证的基本用法和实例代码。

基本概念

在 Angular 中，表单验证包括两个概念：表单控件和验证器。一个表单控件是指表单中的一个输入字段或者组（如 checkbox 组或 radio 组）。一个验证器是指一个验证规则，它可以检查用户输入的值是否符合预期。

表单控件

在 Angular 中，一个表单控件可以使用 ngModel 指令进行绑定。例如，下面的代码定义了一个表单控件：

<input type="text" name="firstName" [(ngModel)]="user.firstName">

用户在这个表单控件中输入的值将被绑定到 user.firstName 这个属性上。

验证器

验证器是一种指令，可以检查表单控件的值是否符合预期。在 Angular 中，有一系列内置的验证器，比如 required、minLength、maxLength 等。例如，下面的代码定义了一个表单控件和一个 required 验证器：

<input type="text" name="firstName" [(ngModel)]="user.firstName" required>
<div *ngIf="firstName.invalid && firstName.touched">
  <p *ngIf="firstName.errors.required">这是必填字段。</p>
</div>

在这个例子中，我们添加了 required 验证器，并且当用户的输入为空时，页面上会显示一个错误信息。

组合多个验证器

有时候我们需要同时对一个表单控件进行多个验证规则，可以使用多个验证器来实现。例如，下面的代码同时添加了 required 和 minLength 验证器：

<input type="text" name="firstName" [(ngModel)]="user.firstName" required minlength="6">
<div *ngIf="firstName.invalid && firstName.touched">
  <p *ngIf="firstName.errors.required">这是必填字段。</p>
  <p *ngIf="firstName.errors.minlength">姓名必须至少包含 6 个字符。</p>
</div>

自定义验证器

除了使用内置的验证器，我们还可以编写自定义的验证器。自定义验证器可以检查更加复杂的条件，以适应我们的业务需求。例如，下面的代码定义了一个自定义验证器，它要求用户的输入必须包含数字和字母：

// javascriptcn.com 代码示例
import { AbstractControl, ValidatorFn } from '@angular/forms';

export function containsDigitAndLetterValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    if (!value) {
      return null;
    }
    const digitRegex = /\d/;
    const letterRegex = /[a-zA-Z]/;
    const hasDigit = digitRegex.test(value);
    const hasLetter = letterRegex.test(value);
    return hasDigit && hasLetter ? null : { 'digitAndLetter': true };
  };
}

在这个例子中，我们定义了一个名为 containsDigitAndLetterValidator 的自定义验证器函数。这个函数返回一个 ValidatorFn 对象，这是 Angular 验证器对象的标准格式。ValidatorFn 函数接受一个 AbstractControl 对象作为参数，该对象表示表单中的一个控件。函数返回值为一个对象，包含一个布尔型属性和一个字符串属性。如果验证成功，返回 null，否则返回一个包含错误信息的对象。

接下来，我们需要将这个自定义验证器添加进表单控件。可以这样做：

<input type="password" name="password" [(ngModel)]="user.password"
    maxlength="20" minlength="6" containsDigitAndLetter>
<div *ngIf="password.invalid && password.touched">
  <p *ngIf="password.errors.required">这是必填字段。</p>
  <p *ngIf="password.errors.minlength">密码必须至少包含 6 个字符。</p>
  <p *ngIf="password.errors.maxlength">密码不能超过 20 个字符。</p>
  <p *ngIf="password.errors.digitAndLetter">密码必须包含数字和字母。</p>
</div>

在这个例子中，我们添加了 containsDigitAndLetter 验证器，当用户的输入不同时包含数字和字母时，页面上将显示一个错误信息。

总结

在本文中，我们介绍了 Angular 表单验证的基本概念和用法。我们了解了如何使用内置的验证器和自定义验证器对表单控件进行验证。对于想要深入学习 Angular 的开发者，掌握表单验证的基础知识是必不可少的。

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