Angular 中如何优雅地处理表单验证-JavaScript中文网-JavaScript教程资源分享门户

表单验证在前端开发中是一个必不可少的环节，要求用户按照一定的规则填写表单内容，以避免输入错误导致的数据错误。而 Angular 框架在表单验证方面提供了极好的支持，能让开发者更轻松地实现对表单的验证处理。本文中将介绍 Angular 中表单验证的相关知识和实践方法。

理解 Angular 表单验证的基础知识

在 Angular 中，数据绑定和表单按照一定的规则进行工作，禁止输入非法的字符。当用户提交表单时，表单数据都会被收集到一个对象中，可以通过表单验证器进行验证。在进行表单验证时，需要用到 validators 对象，这是一个来自 '@angular/forms' 的模块，用于实现表单验证功能。它提供了许多内置验证器，如：

required：检查输入是否为空，并且如果值是 null 或 undefined，则返回无效；
minlength：检查输入字符数是否满足一定要求；
maxlength：检查输入字符数是否超出一定范围；
pattern：检查输入是否符合指定的正则表达式。

在使用表单验证器时，需要确定表单控制器的值是否有效，如果无效，给出相应的错误信息。可以利用 Angular 内置的错误输出属性来实现这一点。

实现表单验证器

Angular 中的表单验证是通过 validators 对象来实现的。不过，可以编写自己的表单验证器，这些验证器可以根据特定的需求来验证表单。

以下是验证器的示例代码：

import { ValidatorFn, AbstractControl } from '@angular/forms';

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

在这个示例中，forbiddenNameValidator 是从 @angular/forms 模块中导入的。该函数接受一个由正则表达式组成的参数，然后返回一个校验器函数。

校验器函数则接受一个实现抽象控制器的对象，然后检查该对象的 value 属性是否匹配指定的正则表达式。如果验证不通过则返回带有错误信息的对象，否则返回 null。

在表单中应用验证器

在 Angular 中，可以通过 validators 属性来将验证器应用到表单中。以下是一个针对 Angular 表单验证的示例：

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" placeholder="Email">
      
      <div *ngIf="myForm.get('email').hasError('required') && myForm.get('email').touched" class="error">
        Email is required!
      </div>
      
      <div *ngIf="myForm.get('email').hasError('pattern') && myForm.get('email').touched" class="error">
        Email is invalid!
      </div>
      
      <button type="submit" [disabled]="!myForm.valid">Submit</button>
    </form>
  `
})
export class AppComponent {
  myForm = this.fb.group({
    email: ['', [Validators.required, Validators.pattern('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?')]]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    console.log(this.myForm.value);
  }
}

在这个示例中，onSubmit() 函数用于输出表单值，myForm 属性用于设置表单的验证器，并通过 formControlName 属性来绑定表单控件。

hasError() 和 touched 属性用于判断表单控件是否满足验证条件。通过组合使用这些属性，可以简单有效地完成表单验证。

注意，当表单控件收到焦点时，touched 属性会自动更新。这样，即使用户在仍处于表单操作阶段的时候代码发生了更新，表单验证也不会对此造成影响。

总结

本文介绍了 Angular 中表单验证的相关知识和实践方法。通过使用 Validators 和 Angular 框架提供的内置验证器，可以轻松实现表单验证的各种需求。在实践中，还可以编写自定义的验证器来满足特定的验证需求。希望本文能够帮助读者更加深入地理解 Angular 中的表单验证，并优雅地应用于开发实践中。

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