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

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

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

下面我们正式开始

引入

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)]],})}

这样在组件中就构造出来了一个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>

实际效果如下