Angular formGroup 响应式表单及多条件校验

由于前段时间使用angular框架并在其中使用到了formGroup响应式表单多条件校验功能所以总结一下前段时间的收获及成果 ，方便以后查阅

Angular 支持非常强大的内置表单验证，maxlength()、minlength()、min()、max()、required 以及 pattern。使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求，但有时我们还需要实现更为复杂的表单校验功能，这时可以使用 Angular 提供的表单自定义校验（Custom Validator）。下面，我们就来了解一下如何使用 Angular 的自定义表单校验

下面我们正式开始

1. 引入

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

2 .在类文件中（组件的TS文件）声明一个Form表单：

public validateForm: FormGroup

3.在构造方法中

  constructor(private fb: FormBuilder, ) {
    this.validateForm = this.fb.group({
       //非空校验
      willStandTime: [null, [Validators.required]],
       //最长为220个字符
      taleContent: [null, [Validators.required, Validators.maxLength(220)]],
      //输入的必须为正整数的数字且最小为0 ， 最大为1000
      funPoint: [null, [Validators.required, Validators.pattern(/^\d+$/), Validators.min(0), Validators.max(1000)]],
    })
  }

这样在组件中就构造出来了一个FormGroup，
4. 在 .html写入下面代码

  <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="2" nz-col nzRequired="true">站会时间</nz-form-label>
          <nz-form-control [nzSpan]="5" nz-col>
            <nz-date-picker nzShowTime [nzStyle]="{ width: '100%' }" nzAllowClear formControlName="willStandTime"
              nzSize="default" [nzDisabledDate]="disabledDate" nzFormat="yyyy-MM-dd HH:mm" nzPlaceHolder="请选择站会时间">
            </nz-date-picker>
          </nz-form-control>
        </nz-form-item>
        <div nz-row>
          <div nz-col nzSpan="7" nzOffset="1">
            <nz-form-item>
              <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired="true">描述</nz-form-label>
              <nz-form-control [nzSm]="20" [nzXs]="24">
                <textarea formControlName="taleContent" nz-input placeholder="请输入故事内容(最长可输入220个字符)"
                  [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
                <nz-form-explain
                  *ngIf="validateForm.get('taleContent').dirty && validateForm.get('taleContent').errors">
                  <ng-container *ngIf="validateForm.get('taleContent').hasError('required')">
                    必填项，不能为空!
                  </ng-container>
                </nz-form-explain>
                <nz-form-explain
                  *ngIf="validateForm.get('taleContent').dirty&&validateForm.get('taleContent').hasError('maxlength')">
                  请输入长度为1-220个的字符
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
          </div>
          //校验状态
          <div nz-col nzSpan="7">
            <nz-form-item>
              <div>
                dirty : {{validateForm.get('taleContent').dirty}} ,
                errors : {{validateForm.get('taleContent').errors | json}} ,
                maxlength : {{validateForm.get('taleContent').hasError('required')}}</div>
            </nz-form-item>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="7" nzOffset="1">
            <nz-form-item>
              <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired="true">功能点数</nz-form-label>
              <nz-form-control [nzSm]="20" [nzXs]="24">
                <input nz-input placeholder="功能点数" formControlName="funPoint" />
                <nz-form-explain *ngIf="validateForm.get('funPoint').dirty&&validateForm.get('funPoint').errors">
                  <ng-container *ngIf="validateForm.get('funPoint').hasError('required')">
                    必填项，不能为空!
                  </ng-container>
                  <ng-container *ngIf="validateForm.get('funPoint').hasError('pattern')">
                    只能输入整数!
                  </ng-container>
                </nz-form-explain>
                <nz-form-explain
                  *ngIf="validateForm.get('funPoint').dirty &&validateForm.get('funPoint').hasError('min')">
                  功能点数必须大于0！
                </nz-form-explain>
                <nz-form-explain
                  *ngIf="validateForm.get('funPoint').dirty &&validateForm.get('funPoint').hasError('max')">
                  功能点数大于1000！
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
           //校验状态
        <div style="margin-left: 50px;">
          <nz-form-item>
            <div>
              dirty : {{validateForm.get('funPoint').dirty}} ,
              errors : {{validateForm.get('funPoint').errors | json}} ,
              min : {{validateForm.get('funPoint').hasError('min')}} ,
              max : {{validateForm.get('funPoint').hasError('max')}}
            </div>
          </nz-form-item>
        </div>
        <div nz-row style="margin-top: 20px;">
          <div nz-col nzSpan="7" nzOffset="4">
            <button nz-button nzType="primary" (click)="Preservation()" [disabled]="!validateForm.valid"
              [class.disabledBtn]="!validateForm.valid">保存待办</button>
          </div>
        </div>
      </form>

实际效果如下