Angular学习笔记49：响应式表单验证(同步)

在创建完表单以后，还需要验证对于表单中的控件，例如验证用户输入的数据是否符合要求?用户对一些控件是否已经填值？通过对表单的验证，确保用户输入的数据的准确性，增强用户体验。

在Angular中，内置了一些基本的内置验证器,对于表单可以分为响应式表单和模板驱动表单。在这里分别做介绍。

响应式表单同步的验证

1. 创建一个组件，构造一个响应式的表单(validateForm).

创建组件：reactive-form-validator

wujiayudeMBP:demo-test wjy$ ng g c reactive-form-validator
CREATE src/app/reactive-form-validator/reactive-form-validator.component.less (0 bytes)
CREATE src/app/reactive-form-validator/reactive-form-validator.component.html (42 bytes)
CREATE src/app/reactive-form-validator/reactive-form-validator.component.spec.ts (735 bytes)
CREATE src/app/reactive-form-validator/reactive-form-validator.component.ts (336 bytes)
UPDATE src/app/app.module.ts (1769 bytes)

构造表单：
修改组件的模板文件：

<nz-divider [nzText]="'响应式表单验证'"></nz-divider>

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">

  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>
      姓名
    </nz-form-label>
    <nz-form-control nzSpan="7" nz-col>
      <input nz-input type="text" placeholder="请输入" id="name" name="name" formControlName="name">
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>
      年龄
    </nz-form-label>
    <nz-form-control nzSpan="7" nz-col>
      <input nz-input type="text" placeholder="请输入" id="age" name="age" formControlName="age">
    </nz-form-control>
  </nz-form-item>

</form>

<nz-content>
  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>表单的值</nz-form-label>
    <nz-form-control nzSpan="18" nz-col>{{validateForm.value | json}}</nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>表单的状态</nz-form-label>
    <nz-form-control nzSpan="18" nz-col>{{validateForm.status}}</nz-form-control>
  </nz-form-item>

</nz-content>

修改组件的类文件：

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-reactive-form-validator',
  templateUrl: './reactive-form-validator.component.html',
  styleUrls: ['./reactive-form-validator.component.less']
})
export class ReactiveFormValidatorComponent implements OnInit {
  public validateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({
      name: [null],
      age: [null],
    });
  }

  ngOnInit() {
  }

  public submitForm(): void {

  }

}

在这里，比较简单的增加了一个 name 、 age 的input控件。
这个时候的页面如下：

这个时候，表单的状态是：VALID；

表单状态的解读：
VALID: 通过了所有有效性检查。
INVALID 至少有一个有效性检查失败了。
PENDING：正在进行有效性检查，处于中间状态。
DISABLED：被禁用，豁免了有效性检查。
这些状态值是互斥的。

在这里要对两个控件分别加一些验证：这两个控件都是必填的控件，这个时候需要加 required 验证器，对于 name 控件，还需要加上：“只能输入英文或者数字”、‘最大长度32’、“最小长度2”的验证器。
对于 age 控件，还需要加上：‘只能输入数字’、“最大值不能超过100”、“最小值不能小于0” 的验证器。

该如何加呢？

修改类文件：

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

@Component({
  selector: 'app-reactive-form-validator',
  templateUrl: './reactive-form-validator.component.html',
  styleUrls: ['./reactive-form-validator.component.less']
})
export class ReactiveFormValidatorComponent implements OnInit {
  public validateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({
      name: [null, [
        Validators.required,
        Validators.maxLength(32),
        Validators.minLength(2),
        Validators.pattern(/^[a-z0-9]+$/i)]
      ],
      age: [null, [
        Validators.required,
        Validators.max(100),
        Validators.min(0),
        Validators.pattern(/^\d+$/)]
      ],
    });
  }

  ngOnInit() {
  }

  public submitForm(): void {

  }

}

在这里都使用的是Angular内置的一些验证器。

Validators.required:非空值验证器;
Validators.maxLength(max):最大长度为max的验证器;
Validators.minLength(min):最小长度为min的验证器;
Validators.max(max):最大值为max的验证器;
Validators.min(min):最小值为max的验证器;
Validators.pattern(/^\d+$/)]:符合某些正则表达式的验证器;

保存运行页面发现，表单的状态变成了：INVALID

当输入正确的数据以后发现表单的状态又成为了：VALID

当输入不正确的值时：

为控件增加提示信息：

<nz-divider [nzText]="'响应式表单验证'"></nz-divider>

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">

  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>
      姓名
    </nz-form-label>
    <nz-form-control nzSpan="7" nz-col>
      <input nz-input type="text" placeholder="请输入" id="name" name="name" formControlName="name">
      <nz-form-explain *ngIf="validateForm.get('name').dirty
      && validateForm.get('name').hasError('required')">必填项不能为空
      </nz-form-explain>

      <nz-form-explain *ngIf="validateForm.get('name').dirty
      && validateForm.get('name').hasError('maxlength')">最大长度32
      </nz-form-explain>

      <nz-form-explain *ngIf="validateForm.get('name').dirty
      && validateForm.get('name').hasError('minlength')">最小长度2
      </nz-form-explain>

      <nz-form-explain *ngIf="validateForm.get('name').dirty
      && validateForm.get('name').hasError('pattern')">只能输入英文或者数字
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>
      年龄
    </nz-form-label>
    <nz-form-control nzSpan="7" nz-col>
      <input nz-input type="text" placeholder="请输入" id="age" name="age" formControlName="age">
      <nz-form-explain *ngIf="validateForm.get('age').dirty
      && validateForm.get('age').hasError('required')">必填项不能为空
      </nz-form-explain>

      <nz-form-explain *ngIf="validateForm.get('age').dirty
      && validateForm.get('age').hasError('max')">最大值不能超过100
      </nz-form-explain>

      <nz-form-explain *ngIf="validateForm.get('age').dirty
      && validateForm.get('age').hasError('min')">最小值不能小于0
      </nz-form-explain>

      <nz-form-explain *ngIf="validateForm.get('age').dirty
      && validateForm.get('age').hasError('pattern')">只能输入数字
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

</form>

<nz-content>
  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>表单的值</nz-form-label>
    <nz-form-control nzSpan="18" nz-col>{{validateForm.value | json}}</nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>表单的状态</nz-form-label>
    <nz-form-control nzSpan="18" nz-col>{{validateForm.status}}</nz-form-control>
  </nz-form-item>

</nz-content>

在这里加上了对控件是否脏检测机制：validateForm.get(‘age’).dirty，这样做是为了防止在用户还没有输入的情况下提示错误信息，如下图所示：

保存运行，当出现输入无效数据时，给用户提示如下：

方便用户知道自己输入的数据错误在哪里，增强用户体验。