如何在angular7中减少反应式表单验证的代码

在Angular 7中，减少反应式表单验证的代码可以通过以下几种方法实现：

基础概念

反应式表单（Reactive Forms）是Angular提供的一种表单处理模式，它允许开发者通过声明式的方式定义表单模型，并使用可观察对象来处理表单数据和验证。

类型

模板驱动表单：通过模板中的指令来创建和管理表单。
反应式表单：通过组件类中的FormBuilder服务来创建和管理表单。

应用场景

复杂表单：当表单包含多个字段且需要复杂的验证逻辑时。
动态表单：表单字段可能需要根据用户输入或其他条件动态添加或移除。

减少代码的方法

1. 使用FormBuilder简化表单构建

FormBuilder提供了一个简洁的方式来创建表单控件和组。

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

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

2. 创建自定义验证器

将常用的验证逻辑封装成自定义验证器，可以在多个表单中复用。

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;
  };
}

然后在表单中使用这个自定义验证器：

this.form = this.fb.group({
  username: ['', [Validators.required, forbiddenNameValidator(/admin/i)]]
});

3. 使用表单控件的状态来显示错误信息

通过绑定表单控件的状态，可以减少模板中的条件逻辑。

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email" type="email">
  <div *ngIf="form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)">
    <div *ngIf="form.get('email').errors.required">Email is required.</div>
    <div *ngIf="form.get('email').errors.email">Email is invalid.</div>
  </div>
  <button type="submit" [disabled]="form.invalid">Submit</button>
</form>