在 Angular SPA 应用中实现响应式表单的技术实现-JavaScript中文网-JavaScript教程资源分享门户

概述

Angular 是一个流行的前端框架，使用 TypeScript 语言来构建单页应用程序（SPA）。使用响应式表单可以极大地提高 Angular 应用的性能和可维护性，同时实现数据的双向绑定。本文将介绍 Angular 中如何实现响应式表单，包括表单控件的定义、绑定、设置校验以及处理表单提交等内容。

实现响应式表单

定义表单控件

在 Angular 中，可以使用 ReactiveFormsModule 模块来定义表单控件。通过 FormGroup、FormControl、FormArray 等类，可以定义各种类型的表单控件。FormGroup 表示表单的一个组，FormControl 表示一个表单控件，包括输入框、下拉框等控件，FormArray 表示表单控件的数组，一般用在动态添加表单控件的场景中。

下面是一个简单的表单示例，包含两个表单控件，分别是输入框和下拉框：

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      name: new FormControl('', Validators.required),
      gender: new FormControl('', Validators.required)
    });
  }
}

在上面的示例中，我们先引入 ReactiveFormsModule 模块和 FormBuilder、FormControl、Validators 等相关类，然后定义了一个 FormComponent 组件。在组件的构造函数中，我们调用了 createForm 方法来初始化表单控件。在 createForm 方法中，我们使用 FormBuilder 类来定义一个 FormGroup，其中包含两个子 FormControl：name 和 gender。其中，name 的初始值是空字符串，而 gender 的初始值也是空字符串，在后面的下拉框控件中会更改。

绑定表单控件

在上面的示例中，我们已经定义了表单控件，但还没有将它们绑定到 html 模板中。为此，我们需要使用表单指令来绑定表单控件，包括 formGroup、formControl、formArrayName、formGroupName 等指令。

下面是一个简单的表单模板示例：

// javascriptcn.com 代码示例
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" formControlName="name">
  </div>
  <div>
    <label for="gender">Gender:</label>
    <select id="gender" formControlName="gender">
      <option value="">Please select</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
  </div>
  <button type="submit" [disabled]="form.invalid">Submit</button>
</form>

在上面的模板中，我们首先使用 formGroup 指令来绑定 form 变量到表单元素上，然后使用 formControlName 指令来将表单控件 name 和 gender 分别绑定到输入框和下拉框控件上。最后，我们使用 ngSubmit 指令来指定表单提交时的处理函数 onSubmit，同时在按钮上绑定了一个表达式，用来判断是否禁用提交按钮，即当表单中存在非法输入时，提交按钮将被禁用。

设置表单校验

在上面的示例中，我们使用了 Validators.required 来设置了 name 和 gender 表单控件的必填校验，这是通过在 FormControl 构造函数的第二个参数中设置的。在 Angular 中，还有许多内置的校验器可以使用，比如 Validators.minLength、Validators.maxLength、Validators.pattern、Validators.email 等。

如果需要自定义表单校验，可以通过 Validators 自定义一个校验器函数，例如：

import { AbstractControl, Validators } 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 的表单校验器函数，用来检查表单控件中的值是否符合某个正则表达式。在这个示例中，我们使用了 ValidatorFn 类型来定义这个函数，它返回一个函数，这个函数又返回一个对象，其中包含一个错误消息和错误值。如果表单控件的值符合校验器中定义的规则，则返回 null；否则，返回一个包含错误消息和错误值的对象，用来提示表单控件中的错误信息。

处理表单提交

在 Angular 中，可以使用 ngSubmit 指令来处理表单提交。当用户单击提交按钮时，处理函数 onSubmit 就会被调用，这个函数中可以对表单数据进行处理、验证、保存等操作，同时阻止表单元素的默认提交行为。

下面是一个简单的表单处理函数示例，它会打印出表单控件的值，并在控制台中输出：

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

总结

在本文中，我们介绍了 Angular 中实现响应式表单的方法，包括表单控件的定义、绑定、校验和提交等。使用 Angular 的 ReactiveFormsModule 模块可以方便地实现响应式表单，提高应用的可维护性和性能。同时，我们还介绍了如何使用 Validators 类中的内置校验器来设置表单校验规则，并可以通过自定义校验器函数来实现更加灵活的校验规则。

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