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

Angular 是一个流行的前端框架，它使用 TypeScript 作为主要语言。表单验证是 Web 应用程序中一个非常重要的功能，它可以确保用户输入的数据符合预期的格式和值，从而提高应用程序的可靠性和安全性。在本文中，我们将介绍如何在 Angular 中使用 TypeScript 进行表单验证。

Angular 表单验证简介

Angular 表单验证可以通过模板驱动和响应式两种方式实现。模板驱动表单是基于模板的方式实现的，而响应式表单是基于代码的方式实现的。无论哪种方式，Angular 都提供了一组内置的验证器和自定义验证器，以满足各种验证需求。

内置的验证器包括必填、最小值、最大值、正则表达式、邮箱、URL 等。自定义验证器可以通过实现 Validator 接口来创建。

在模板驱动表单中使用 TypeScript 进行验证

在模板驱动表单中，我们可以使用 ngModel 指令来绑定表单控件和数据模型。例如，以下代码演示了如何创建一个简单的表单，并验证用户输入的姓名是否为空：

<form #form="ngForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" [(ngModel)]="user.name" required>
  <div *ngIf="form.controls['name'].invalid && (form.controls['name'].dirty || form.controls['name'].touched)">
    <div *ngIf="form.controls['name'].errors.required">姓名不能为空</div>
  </div>
</form>

在这个例子中，我们使用了 ngForm 指令来创建一个表单，并使用 ngModel 指令将表单控件和数据模型绑定在一起。我们还在 input 标签中添加了 required 属性，表示此项为必填项。

接下来，我们使用 form.controls 属性来访问表单控件，并检查它是否有 invalid 或 dirty 或 touched 状态。如果控件无效并且已被修改过或者已被触摸过，我们将显示一个错误消息。

我们还可以使用 ngClass 指令来动态添加 CSS 类，以便在控件无效时显示错误样式。例如，以下代码将在控件无效时添加 is-invalid 类：

<input type="text" id="name" name="name" [(ngModel)]="user.name" required [ngClass]="{'is-invalid': form.controls['name'].invalid && (form.controls['name'].dirty || form.controls['name'].touched)}">

在响应式表单中使用 TypeScript 进行验证

在响应式表单中，我们需要手动创建表单控件和数据模型，并使用 FormGroup 和 FormControl 类来组织和管理它们。例如，以下代码演示了如何创建一个简单的响应式表单，并验证用户输入的年龄是否大于等于 18：

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <label for="age">年龄：</label>
      <input type="number" id="age" formControlName="age">
      <div *ngIf="form.controls['age'].invalid && (form.controls['age'].dirty || form.controls['age'].touched)">
        <div *ngIf="form.controls['age'].errors.min">年龄必须大于等于 18</div>
      </div>
    </form>
  `,
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      age: ['', [Validators.required, Validators.min(18)]],
    });
  }
}

在这个例子中，我们使用了 FormBuilder 类来创建一个 FormGroup 和一个 FormControl。我们将 FormGroup 绑定到表单元素上，将 FormControl 绑定到 input 元素上，并在 FormControl 中添加了必填和最小值验证器。

我们还在模板中使用了 *ngIf 指令来检查表单控件是否无效，并显示相应的错误消息。

自定义验证器

除了内置的验证器之外，我们还可以创建自定义验证器来满足特定的验证需求。自定义验证器可以通过实现 Validator 接口来创建。例如，以下代码演示了如何创建一个自定义验证器，用于验证两个密码输入是否相同：

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

export function passwordMatchValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const password = control.get('password');
    const confirmPassword = control.get('confirmPassword');

    return password && confirmPassword && password.value !== confirmPassword.value ? { 'passwordMismatch': true } : null;
  };
}

在这个例子中，我们创建了一个名为 passwordMatchValidator 的函数，它返回一个 ValidatorFn 类型的函数。该函数接受一个 AbstractControl 类型的参数，并返回一个对象，表示验证结果。

我们在函数中获取了两个密码输入控件，并比较它们的值。如果两个密码输入不相同，我们将返回一个包含 passwordMismatch 属性的对象，表示验证失败。

要在表单中使用自定义验证器，我们需要将它们添加到表单控件的验证器列表中。例如，以下代码演示了如何在响应式表单中使用自定义验证器：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { passwordMatchValidator } from './validators/password-match.validator';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <label for="password">密码：</label>
      <input type="password" id="password" formControlName="password">
      <label for="confirm-password">确认密码：</label>
      <input type="password" id="confirm-password" formControlName="confirmPassword">
      <div *ngIf="form.controls['confirmPassword'].invalid && (form.controls['confirmPassword'].dirty || form.controls['confirmPassword'].touched)">
        <div *ngIf="form.controls['confirmPassword'].errors.passwordMismatch">两次输入的密码不一致</div>
      </div>
    </form>
  `,
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required],
    }, {
      validator: passwordMatchValidator(),
    });
  }
}

在这个例子中，我们创建了一个名为 passwordMatchValidator 的自定义验证器，并将它添加到表单控件的验证器列表中。我们在模板中使用了 *ngIf 指令来检查表单控件是否无效，并显示相应的错误消息。

总结

在本文中，我们介绍了如何在 Angular 中使用 TypeScript 进行表单验证。我们讨论了模板驱动表单和响应式表单两种方式，以及内置的验证器和自定义验证器。我们还提供了示例代码，演示了如何创建简单的表单，并进行验证。希望这篇文章对你有所帮助！

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