1、案例需求

表单提交，表单悉数校验胜利才提交，当表单校验毛病，表单边框变红，同时有毛病提醒信息，有重置功用

2、代码剖析

• 在线预览
• git堆栈

本案例中运用了相应式表单，相应式表单在表单的校验方面异常轻易

2.1、注册 ReactiveFormsModule

要运用相应式表单，就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它增加到你的 NgModule 的 imports 数组中。

app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ]

2.2、运用 FormBuilder 来天生表单控件

当须要与多个表单打交道时，手动建立多个表单控件实例会异常烦琐。FormBuilder 效劳供应了一些便利方法来天生表单控件。FormBuilder 在幕后也运用一样的体式格局来建立和返回这些实例，只是用起来更简朴。

• 注入 FormBuilder 效劳

constructor(
    private fb: FormBuilder
  ) { }

• 天生表单控件

FormBuilder 供应了一个语法糖，以简化 FormControl、FormGroup 或 FormArray 实例的建立历程。它会削减构建庞杂表单时所需的榜样代码的数目（new FormControl）。

formGroup: FormGroup;

this.formGroup = this.fb.group({
      name: '',
      age: '',
      sex: ''
    });

2.3、FormGroupDirective

formGroup 是一个输入指令，它接收一个 formGroup 实例，它会运用这个 formGroup 实例去婚配 FormControl、FormGroup、FormArray 实例，所以模版中的 formControlName 必需和 formGroup 中的 name 婚配。

<form [formGroup]="formGroup" (ngSubmit)="submit()" novalidate>
  <div class="form-group">
    <label>姓名：</label>
    <input type="text"
      formControlName="name">
      <p>{{nameErrorMessage}}</p>
  </div>
</form>

2.4、表单状况

每一个表单控件都有本身的状况，共五个状况属性，都是布尔值。

• valid 表单值是不是有用
• pristine 表单值是不是未转变
• dirty 表单值是不是已转变
• touched 表单是不是已被访问过
• untouched 表单是不是未被访问过

以输入姓名的表单为例，只考证该表单的必填项时。表单先猎取核心而且输入姓名，末了移除核心，每一步表单的状况以下：

2.5、表单校验

表单考证用于考证用户的输入，以确保其完全和准确。Angular内置的了一些校验器，如 Validators.required， Validators.maxlength，Validators.minlength， Validators.pattern，然则不能自定义毛病提醒信息，所以实用性不强，满足不了营业场景的需求，因而我们能够自定义表单校验器。

自定义表单校验器

name-validator.ts

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

export function nameValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {

    if (!control.value) {
      return { message: '请输入必选项' };
    }

    if (control.value.length > 10) {
      return { message: '称号大于10位了' };
    }

    return null;

  };
}

运用自定义考证器

app.component.ts

this.formGroup = this.fb.group({
      name: ['', nameValidator()],
      age: ['', ageValidator()],
      sex: ['', sexValidator()]
    });

显现毛病提醒信息

当页面初始化的时刻不应该显现毛病信息，也就是表单touched为true

// Error
private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return (control.touched && control.invalid) ? control.errors.message : '';
  }

但是touched只需落空核心才为true，在输入的时刻一向为false。致使在输入的时刻，表单校验毛病，却显现不了毛病信息。因而须要再次推断 dirty 状况，只需表单值转变，则为false

private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : '';
  }

2.6、markAsTouched

未对表单操纵时，点击提交按钮时，则模仿表单被touched，显现提醒信息

markFormGroupTouched(formGroup: FormGroup) {
    (<any>Object).values(formGroup.controls).forEach(item => {
      if (item.controls) {
        this.markFormGroupTouched(item);
      } else {
        item.markAsTouched();
      }
    });
  }