angular2表单异步验证

工作上解决的一种异步方法，angular8都发布了，也没去看

官方网站:https://angular.io/features

阿里的框架：https://ng.ant.design/docs/recommendation/zh

1.先构建一个表单

  this.form = this.fb.group({ Cust_Moblie: [null, [Validators.compose([this.saleService.mobileRegxValidator])], [this.mobilequeValidator]], Cust_Tel: [null, [Validators.compose([this.saleService.telValidator])], [this.telValidator]], Cust_QQ: [null, [Validators.compose([this.saleService.qqValidator])], [this.qqValidator]], Cust_Wechat: [null, [Validators.compose([this.saleService.weChatValidator])], [this.weChatValidator]], Cust_Email: [null, [Validators.compose([this.saleService.emailValidator])], [this.emailValidator]], });

2.fromgroup的三个参数。官方文档还是要好好看的，当初就是面向百度编程，搜了好久才在百度上找到的解决方案

  Cust_Email: [null, [Validators.compose([this.saleService.emailValidator])], [this.emailValidator]] 数组中第一项表示字段的默认值，null表示没有 数组第二项为一个数组，其中填写所需同步校验器的方法名，即不需要后台校验的校验方法 数组第三项仍为一个数组，其中填写所需异步校验器的方法名

第三点的异步验证会在同步验证通过之后再验证

3.同步邮箱验证

 /**邮箱验证 */ emailValidator(control: FormControl) { const val = control.value; const mobieReg = regEx.email; const result = val == "" || val == null ? true : mobieReg.test(val); return result ? null : { Data: { info: '邮箱格式不正确' }, errors: true, required: true }; }

4.异步邮箱验证，判断是否已被注册

  timers: any; /**异步调用方法 */ asycValidateFunction(observer, val, field1, field2, functionName, timers) { if (timers) { clearTimeout(this.timers) } if (val == "" || val == null) { observer.next(null); observer.complete(); } else { timers = setTimeout(() => { this.http.get(CUSTOMER_DIC_VALUE.Customer[functionName], { param: val, field1: field1, field2: field2 }).subscribe((data: any) => { if (data.Code === 'fail') { observer.next({ error: true, duplicated: true, Data: { info: data.Data } }); observer.complete(); } else { observer.next(null); observer.complete(); } }) }, 1000) } }

5.结合ng-zorror-ant的格式表现的验证提示信息

  <nz-form-item class="mb-sm"> <nz-form-label [nzSm]="6" [nzXs]="24">Email</nz-form-label> <nz-form-control [nzSm]="10" [nzXs]="24" nzHasFeedback> <input nz-input formControlName="Cust_Email" placeHolder="Email"> <nz-form-explain *ngIf=" (form.get('Cust_Email')?.dirty && form.get('Cust_Email')?.errors) || form.get('Cust_Email')?.pending "> <ng-container *ngIf="form.get('Cust_Email')?.hasError('required')"> {{form.getError('Data','Cust_Email')?.info}} </ng-container> <ng-container *ngIf="form.get('Cust_Email')?.hasError('duplicated')"> {{form.getError('Data','Cust_Email')?.info}} </ng-container> <ng-container *ngIf="form.get('Cust_Email')?.pending"> 验证中... </ng-container> </nz-form-explain> </nz-form-control> </nz-form-item>

6.页面表现形式