Angular 中的表单验证与自定义表单验证-JavaScript中文网-JavaScript教程资源分享门户

表单是 Web 应用中最常见的交互方式之一。要保证表单数据的正确性和完整性，表单验证是不可避免的。Angular 提供了丰富的表单验证功能，包括内置的验证规则以及自定义的验证器。本文将详细介绍 Angular 中的表单验证和自定义表单验证。

内置的表单验证规则

Angular 内置了许多常见的表单验证规则，包括必填、最小值、最大值、最小长度、最大长度、正则表达式等。将这些验证规则应用于表单控件可以有效地保证表单数据的正确性。下面是使用内置验证规则的示例代码：

// javascriptcn.com 代码示例
<form>
  <label>
    用户名：
    <input type="text" name="username" [(ngModel)]="username" required minlength="6" maxlength="12">
  </label>
  <label>
    密码：
    <input type="password" name="password" [(ngModel)]="password" required>
  </label>
  <button type="submit">登录</button>
</form>

在上述示例代码中，用户名控件应用了 required、minlength 和 maxlength 三个内置验证规则；密码控件应用了 required 规则。这些验证规则可以在模板中直接应用于表单控件，非常方便。

自定义表单验证器

除了内置的验证规则，Angular 还提供了自定义表单验证器的功能。开发者可以根据业务需求自定义验证器，比如验证两个密码是否一致、验证手机号码格式等。自定义表单验证器可以是同步的，也可以是异步的。

在实现自定义表单验证器前，先来了解一下 Angular 中的 FormControl 类。FormControl 类代表了一个表单控件，可以用来对表单控件进行状态管理和验证。下面是使用自定义表单验证器的示例代码：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

function passwordMatchValidator(control: FormGroup): { [key: string]: boolean } | null {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');
  if (password && confirmPassword) {
    return password.value === confirmPassword.value ? null : { 'passwordMatch': true };
  }
  return null;
}

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
})
export class RegisterFormComponent {
  form = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
    confirmPassword: new FormControl('', Validators.required),
  }, { validators: passwordMatchValidator });
}

在上述示例代码中，我们实现了一个自定义的表单验证器，用于验证两个密码是否一致。passwordMatchValidator 函数接收一个 FormGroup 类型的参数，代表了包含了一组表单控件的表单；函数返回一个对象，如果验证没有通过，则返回一个包含 passwordMatch 属性的对象，否则返回 null。在组件类里面，我们使用 FormGroup 类构建了一个表单控件组，并把自定义的表单验证器应用于这个表单控件组。

在模板里面使用自定义表单验证器也非常简单：

// javascriptcn.com 代码示例
<form [formGroup]="form">
  <label>
    用户名：
    <input type="text" formControlName="username">
  </label>
  <label>
    密码：
    <input type="password" formControlName="password">
  </label>
  <label>
    重复密码：
    <input type="password" formControlName="confirmPassword">
  </label>
  <div *ngIf="form.hasError('passwordMatch')">
    密码不一致
  </div>
  <button type="submit">注册</button>
</form>

在上述示例代码中，我们在表单组件上使用了 formGroup 指令，将表单控件组绑定到组件的 form 属性上。对于需要使用自定义验证器的表单控件，使用 formControlName 指令指定控件的名称即可。当表单验证不通过时，显示一个错误提示信息。

总结

在本文中，我们介绍了 Angular 中的表单验证和自定义表单验证器。内置的验证规则可以方便地实现常见的表单验证需求，而自定义表单验证器则可以满足更加复杂的业务需求。使用表单验证可以保证表单数据的正确性和完整性，提高应用的稳定性和安全性。

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