使用响应式验证 Angular - Javascript

在 Angular 2 中，我们可以使用响应式表单来实现强大的验证功能。这种表单提供了一个基于模型驱动的方法来处理表单控件和验证规则。在本文中，我们将关注如何使用响应式表单来实现前端验证，并为您提供一些示例和基本方法。

创建响应式表单

要创建 Angular 响应式表单，您需要使用 FormGroup 和 FormControl 类。 FormGroup 类是一种组件类型，它接收一组控件作为输入，并管理它们的值和验证状态。 FormControl 类用于创建一个单独的表单控件，包括文本框、下拉列表或日历控件等。以下是一个基本的示例：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input formControlName="name" type="text" placeholder="Name">
      <button [disabled]="!form.valid" type="submit">Save</button>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required),
  });
}

在这个例子中，我们定义了一个名为 form 的 Angular FormGroup，它有一个名为 name 的 FormControl。name 表示一个文本框，它必须填写。我们还添加了一个提交按钮，只有在表单有效时才可用。

这个例子是非常简单的，但它演示了如何创建一个响应式表单并绑定到模板中的控件。我们还使用了 Validators 服务来定义 required 验证器，以确保用户输入值。

显示错误消息

为了向用户显示错误消息，您可以使用模板变量和 *ngIf 指令来检查表单控件的状态，如下所示：

<form [formGroup]="form">
  <div class="form-group">
    <label for="name">Name</label>
    <input formControlName="name" type="text" class="form-control" [ngClass]="{'is-invalid': form.controls.name.dirty && !form.controls.name.valid}">
    <div class="invalid-feedback" *ngIf="form.controls.name.dirty && form.controls.name.errors?.required">Name is required</div>
  </div>
  <button [disabled]="!form.valid" type="submit">Save</button>
</form>

在这个例子中，我们在 input 标签上设置了 formControlName="name"，这是一个指令，它绑定一个字符串值到 FormGroup 控件中定义的 formControlName 属性。

我们还添加了一个 ngClass 指令，它提供一组 CSS 类名，内容取决于表单控件的状态（例如，控件是否为空或无效）。

异步验证器

在某些情况下，您可能需要使用异步验证器，这些验证器可以向服务器发送异步请求，以检查用户输入是否正确。例如，您可能希望检查在线数据库是否存在指定的用户名。为了使用异步验证器，您可以编写一些自定义代码，如下所示：

import { FormGroup, FormControl } from '@angular/forms';

function uniqueNameValidator(control: FormControl): Promise<any> {
  const asyncResult: Promise<any> = /* Your validation code here */;
  return asyncResult
    .then(response => {
      if (response.ok) {
        return null;
      } else {
        return { 'uniqueName': true };
      }
    });
}

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

  constructor() {
    this.form = new FormGroup({
      'name': new FormControl('', Validators.required, uniqueNameValidator),
      'email': new FormControl('', Validators.required),
    });
  }
}

在这个简单的示例中，我们创建了 uniqueNameValidator 函数，它使用 Promise 返回异步验证结果。我们还将这个函数传递给 new FormControl() 构造函数中，它允许我们向 FormGroup 中添加异步验证器。

在此示例中，我们同时使用了 Validators.required 和 uniqueNameValidator 验证器。如果两个验证器都返回 true，则表单控件有效；如果任一验证器返回 false，则表单无效。

验证复合控件

在某些情况下，您可能需要验证复合控件，例如，包含多个输入字段的地址输入框。在这种情况下，您可以使用 FormGroup 来定义一个新的子表单控件。以下是一个例子：

import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-form',
  templateUrl: './my-form.component.html',
})
export class MyFormComponent {
  form = this.fb.group({
    'firstName': ['', Validators.required],
    'lastName': ['', Validators.required],
    'addressForm': this.fb.group({
      'street': ['', Validators.required],
      'city': ['', Validators.required],
      'state': ['', Validators.required],
      'zip': ['', [Validators.required, Validators.pattern(/^\d{5}(?:[-\s]\d{4})?$/)]],
    }),
  });

  constructor(private fb: FormBuilder) {}

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

在此示例中，我们使用 FormBuilder 服务代替手动创建 FormGroup 和 FormControl。FormBuilder 简化了表单控件和验证器的创建过程。

在此示例中，我们定义了一个名为 addressForm 的子组件，并为其定义了一组嵌套的表单控件。我们还在 zip 字段上添加了正则表达式的验证器，以确保邮政编码格式正确。

结论

在本文中，我们讨论了如何使用 Angular 响应式表单来实现前端验证。我们了解了如何创建表单控件、定义验证器、应用样式，并处理异步请求。Angular 的处理方式非常简洁明了，使开发者更专注于业务逻辑，而无需过多关注前端验证细节。如果您需要更多详细信息，请查阅 Angular 官方文档。