如何在 Angular 中使用 TypeScript 编写表单验证-JavaScript中文网-JavaScript教程资源分享门户

Angular 是一款流行的前端框架，它使用 TypeScript 作为主要的编程语言。在 Angular 中，表单验证是一个非常重要的功能，用于确保用户输入的数据符合预期的格式和规范。本文将介绍如何在 Angular 中使用 TypeScript 编写表单验证。

1. 表单验证的基本原理

在 Angular 中，表单验证的基本原理是通过验证器函数来验证用户输入的数据是否符合要求。验证器函数是一个函数，它接收一个控件作为参数，并返回一个验证结果。控件可以是输入框、下拉框等用户输入组件。

验证器函数通常有两种返回值：

如果控件的值符合要求，则返回 null。
如果控件的值不符合要求，则返回一个对象，该对象包含一个或多个属性，每个属性表示一个验证错误。例如，如果控件的值不是一个有效的电子邮件地址，则可以返回一个包含一个 email 属性的对象。

在 Angular 中，可以使用 Validators 类提供的一些内置验证器函数来验证控件的值。例如，Validators.required() 函数用于验证控件的值是否为空，Validators.email() 函数用于验证控件的值是否是一个有效的电子邮件地址。

2. 在组件中编写表单验证

在 Angular 中，可以在组件类中编写表单验证。首先，需要在组件类中定义一个 FormGroup 对象，该对象表示整个表单。然后，可以为 FormGroup 对象中的每个控件定义一个 FormControl 对象，该对象表示一个控件。

例如，假设有一个包含用户名和密码输入框的登录表单，可以在组件类中定义如下的 FormGroup 对象：

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

@Component({
  selector: 'app-login',
  template: `
    <form [formGroup]="loginForm">
      <input type="text" formControlName="username" placeholder="Username">
      <input type="password" formControlName="password" placeholder="Password">
      <button type="submit" [disabled]="!loginForm.valid">Login</button>
    </form>
  `
})
export class LoginComponent {
  loginForm = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });
}

在上面的代码中，定义了一个名为 loginForm 的 FormGroup 对象，它包含两个 FormControl 对象，分别表示用户名和密码输入框。每个 FormControl 对象都使用 Validators.required() 函数作为验证器函数，以确保控件的值不为空。

在模板中，使用 formGroup 指令将表单绑定到 loginForm 对象，并使用 formControlName 指令将每个输入框绑定到相应的 FormControl 对象。在登录按钮上使用 disabled 属性，它会根据表单的有效性来禁用或启用按钮。

3. 自定义表单验证器

除了使用内置的验证器函数外，还可以编写自定义的验证器函数来验证控件的值。自定义验证器函数是一个函数，它接收一个控件作为参数，并返回一个验证结果。

例如，假设要验证密码输入框的值是否包含至少一个数字和一个字母，可以编写如下的自定义验证器函数：

// javascriptcn.com 代码示例
function passwordValidator(control: FormControl) {
  const value = control.value;
  if (!value) {
    return null;
  }
  const hasNumber = /\d/.test(value);
  const hasLetter = /[a-zA-Z]/.test(value);
  return hasNumber && hasLetter ? null : { password: 'Password must contain at least one number and one letter.' };
}

在上面的代码中，定义了一个名为 passwordValidator 的自定义验证器函数，它接收一个 FormControl 对象作为参数。该函数首先获取控件的值，然后使用正则表达式检查该值是否包含至少一个数字和一个字母。如果验证通过，则返回 null；否则，返回一个包含一个 password 属性的对象，该属性表示验证错误。

然后，在组件类中可以使用 Validators.compose() 函数将内置的 Validators.required() 函数和自定义的 passwordValidator 函数组合起来，以创建一个新的验证器函数：

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

function passwordValidator(control: FormControl) {
  const value = control.value;
  if (!value) {
    return null;
  }
  const hasNumber = /\d/.test(value);
  const hasLetter = /[a-zA-Z]/.test(value);
  return hasNumber && hasLetter ? null : { password: 'Password must contain at least one number and one letter.' };
}

@Component({
  selector: 'app-login',
  template: `
    <form [formGroup]="loginForm">
      <input type="text" formControlName="username" placeholder="Username">
      <input type="password" formControlName="password" placeholder="Password">
      <button type="submit" [disabled]="!loginForm.valid">Login</button>
    </form>
  `
})
export class LoginComponent {
  loginForm = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.compose([Validators.required, passwordValidator]))
  });
}

在上面的代码中，将 Validators.required() 函数和 passwordValidator 函数组合起来，以创建一个新的验证器函数。然后，将该函数作为 FormControl 对象的验证器函数，以确保密码输入框的值不为空，并且至少包含一个数字和一个字母。

4. 总结

在 Angular 中，表单验证是一个非常重要的功能，它可以确保用户输入的数据符合预期的格式和规范。本文介绍了如何在 Angular 中使用 TypeScript 编写表单验证，包括内置的验证器函数、自定义的验证器函数以及如何在组件类中编写表单验证。希望本文能够帮助读者更好地理解 Angular 中的表单验证机制，并能够在实际项目中应用相关知识。

示例代码：https://stackblitz.com/edit/angular-form-validation-example

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