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

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

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

下面我们正式开始

引入

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 ， 最大为1000funPoint: [null, [Validators.required, Validators.pattern(/^\d+$/), Validators.min(0), Validators.max(1000)]],})}

这样在组件中就构造出来了一个，

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>

实际效果如下