Angular 7表单

Angular 7表单是一个强大的模块，用于管理表单输入数据和验证用户输入。它提供了易于理解和使用的API，使开发人员能够轻松地创建响应式表单。

基本的表单控件

在Angular中，我们可以使用各种表单控件来收集用户的输入数据。以下是一些基本的表单控件：

输入框

输入框是最基本的表单控件之一，用于接收文本输入。可以使用以下方式在Angular中创建输入框：

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

在上述代码中，我们使用双向绑定技术将输入框的值绑定到组件类中的“name”属性上。这意味着当用户在输入框中输入文本时，“name”属性的值将随之更改。

复选框

复选框用于选择多个选项。可以使用以下方式在Angular中创建复选框：

<input type="checkbox" [(ngModel)]="isDone">

在上述代码中，我们使用双向绑定技术将复选框的值绑定到组件类中的“isDone”属性上。这意味着当用户更改复选框的状态时，“isDone”属性的值将随之更改。

单选框

单选框用于选择一个选项。可以使用以下方式在Angular中创建单选框：

<label>
  <input type="radio" name="gender" value="male" [(ngModel)]="gender"> Male
</label>
<label>
  <input type="radio" name="gender" value="female" [(ngModel)]="gender"> Female
</label>

在上述代码中，我们将两个单选框分别放在两个标签中，并将它们的“name”属性设置为“gender”，使它们成为一组单选框。使用双向绑定技术将选中单选框的值绑定到组件类中的“gender”属性上。

表单验证

Angular 7表单不仅可以帮助我们收集用户输入，还可以帮助我们验证用户输入。以下是一些可用的验证器：

必填

<input type="text" [(ngModel)]="name" required>

在上述代码中，我们使用“required”验证器来确保输入框中有一些文本。

最小长度和最大长度

<input type="text" [(ngModel)]="name" minlength="3" maxlength="10">

在上述代码中，我们可以使用“minlength”和“maxlength”验证器来验证输入框中输入的文本长度。

自定义验证器

import { AbstractControl, ValidatorFn } 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;
  };
}

在上述代码中，我们定义了一个自定义验证器函数，该函数接受一个正则表达式作为参数，并返回一个验证器函数。该验证器函数将检查输入框中的文本是否与正则表达式匹配，如果匹配，则返回包含验证错误对象的JSON，否则返回null。

异步验证

如果我们需要为表单控件执行异步验证，则可以使用Angular的异步验证器。以下是一个可用的异步验证器：

import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, delay } from 'rxjs/operators';

export function uniqueNameValidator(nameRe: RegExp): AsyncValidatorFn {
  return (control: AbstractControl): Promise<{[key: string]: any}> | Observable<{[key: string]: any}> => {
    const value = control.value;
    const taken = ['admin', 'superuser'].indexOf(value) > -1;
    return of(taken ? {'uniqueName': {value: control.value}} : null).pipe(delay(5000)); // 模拟异步验证
  };
}

在上述代码中，我们定义了一个异步验证器函数，该函数接受一个正则表达式作为参数，并返回一个异步验证器函数。异步验证器函数将使用一个异步任务检查输入框中的文本是否与早期使用的名称匹配。如果匹配，则返回包含验证错误对象的JSON，否则返回null。

结束语

Angular 7表单是一个功能强大的模块，可帮助开发人员创建响应式表单并验证用户输入。无论您是初学者还是有经验的开发人员，Angular表单都是一个非常重要的话题，因为它是构建高质量Web应用程序的关键组件之一。