angular6+，表单异步校验

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaoqingkaitt/article/details/87915037

npm install great-ngform --save

表单内容校验

引入module

import {GreatValidateModule} from "great-ngform";
@NgModule({
  imports: [
    CommonModule,
    GreatValidateModule,
    FormsModule
  ]
})

模板驱动表单验证方式

• 1、验证字节长度（通过maxlength控制的是字符长度，由于一个汉字占2个字节，数据库中的varchar类型也是字节长度，这样方便中英文混合时的验证）【模板】

/** 只需要在input标签上添加 greatByteLength 即可 **/
<input name="byteLength" #byteLengthBox="ngModel" [(ngModel)]="byteLength"
       maxlength="30" minlength="5" required
       greatByteLength="30" fieldName="byteLength" failName="errorMsg"
/** 显示错误信息 **/
<div *ngIf="byteLengthBox.invalid && (byteLengthBox.dirty || byteLengthBox.touched)">
  <div *ngIf="byteLengthBox.errors.required">byteLength is required.</div>
  <div *ngIf="byteLengthBox.errors.minlength">byteLength must be at least 4 characters long.</div>
  <div *ngIf="byteLengthBox.errors.byteLength">{{byteLengthBox.errors.byteLength.errorMsg}}</div>
</div>

• 2、验证手机号【模板】

/** 只需要在input标签上添加greatMobile即可 **/
<input name="mobile" #mobileBox="ngModel" [(ngModel)]="mobile" greatMobile>
/** 显示错误信息 **/
<div *ngIf="mobileBox.invalid && (mobileBox.dirty || mobileBox.touched)">
  {{mobileBox.errors.mobile.errorMsg}}
</div>

• 3、身份证【模板】

/** 只需要在input标签上添加greatIdentityCard即可 **/
<input name="identityCard" #identityCardBox="ngModel" [(ngModel)]="identityCard" greatIdentityCard>
/** 显示错误信息 **/
<div *ngIf="identityCardBox.invalid && (identityCardBox.dirty || identityCardBox.touched)">
  {{identityCardBox.errors.identityCard.errorMsg}}
</div>

• 4、正则验证【模板】

/** 只需要在input标签上添加greatRegexp即可 **/
<input name="regexp" #regexpBox="ngModel" [(ngModel)]="identityCard" greatRegexp>
/** 显示错误信息 **/
<div *ngIf="regexpBox.invalid && (regexpBox.dirty || regexpBox.touched)">
  正则信息不匹配
</div>

• 5、小数验证【模板】

/**
只需要在input标签上添加greatNumber即可，
greatNumber的值为最大允许的数字位数，
scale的值为最大允许的小数位数
当前示例为：最多输入6位数字，其中小数最多为2位，也就是当小数为2位时，小数点前面最多为4位。如果小数为1位时，小数点前面可以为5位。如果没有小数时，可输入6位的整数。
**/
<input name="decimalDigit" #decimalDigitBox="ngModel" [(ngModel)]="decimalDigit" greatNumber="6" scale="2" fieldName="decimalDigit" >
/** 显示错误信息 **/
<div *ngIf="decimalDigitBox.invalid && (decimalDigitBox.dirty || decimalDigitBox.touched)">
  {{decimalDigitBox.errors.decimalDigit|json}}
</div>

• 6、mac地址【模板】

/** 只需要在input标签上添加 greatMac 即可 **/
<input name="greatMac" #greatMacBox="ngModel" [(ngModel)]="greatMac" greatMac fieldName="greatMac" >
/** 显示错误信息 **/
<div *ngIf="greatMacBox.invalid && (greatMacBox.dirty || greatMacBox.touched)">
  MAC地址格式有误！
</div>

• 7、url地址【模板】

/** 只需要在input标签上添加 greatUrl 即可 **/
<input name="greatUrl" #greatUrlBox="ngModel" [(ngModel)]="greatUrl" greatUrl fieldName="greatUrl" >
/** 显示错误信息 **/
<div *ngIf="greatUrlBox.invalid && (greatUrlBox.dirty || greatUrlBox.touched)">
  MAC地址格式有误！
</div>

• 8、异步校验【模板】

建议增加[ngModelOptions]属性

参数	名称	必传	参数类型
greatAsync	后台url	是	string
fieldName	验证失败后属性名，默认pattern	否	string
paramName	向后台传的参数名	是	string
[params]	向后台传的参数集合	否	json

• 8.1 单个参数示例

/** 只需要在input标签上添加 greatAsync 即可 **/
 <input name="async1" #async1Box="ngModel" [(ngModel)]="async1"   [ngModelOptions]="{ updateOn: 'blur' }"
                 greatAsync="http://localhost:3000/organization/unique" 
                 fieldName="async1" 
                 paramName="code">
/** 显示错误信息 **/
<div *ngIf="async1Box.invalid && (async1Box.dirty || async1Box.touched)">
  机构编码已存在===》{{async1Box.errors|json}}
</div>

• 8.2 多个参数示例

params={"parentId":"234"}

<input name="async" #asyncBox="ngModel" [(ngModel)]="async"   [ngModelOptions]="{ updateOn: 'blur' }"
       greatAsync="http://localhost:3000/organization/unique" 
       fieldName="async" 
       paramName="name" 
       [params]=params>
<div *ngIf="asyncBox.invalid && (asyncBox.dirty || asyncBox.touched)">
  同级机构下，此名称已存在===》{{asyncBox.errors|json}}
</div>

响应表单验证方式

• 1、正则验证【响应】

<input  formControlName="url" id="url" placeholder="网址"
  greatRegexp="^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?">
<div *ngIf="form.get('url').dirty && form.get('url').errors">网址格式有误</div>

• 2、验证字节长度【响应】

ts代码：

name = new FormControl('');

html代码

<input type="text" [formControl]="name" greatByteLength="20" required>
/** 显示错误信息 **/
<div *ngIf="name.dirty && name.errors">
  {{name.errors.pattern}}
</div>

• 3、验证手机号【响应】

  <input type="text" [formControl]="mobile" greatMobile>
  <div *ngIf="mobile.dirty && mobile.errors">
    {{mobile.errors.mobile.errorMsg}}
  </div>

• 4、身份证号【响应】

  <input type="text" [formControl]="identityCard" greatIdentityCard>
  <div *ngIf="identityCard.dirty && identityCard.errors">
    {{identityCard.errors.identityCard.errorMsg}}
  </div>

• 5、小数验证【响应】

注意：input标签中不能添加type="number"属性

/**
只需要在input标签上添加greatNumber即可，
greatNumber的值为最大允许的数字位数，
scale的值为最大允许的小数位数
当前示例为：最多输入6位数字，其中小数最多为2位，也就是当小数为2位时，小数点前面最多为4位。如果小数为1位时，小数点前面可以为5位。如果没有小数时，可输入6位的整数。
**/
<input type="text" [formControl]="decimalDigit" greatNumber="6" scale="2" fieldName="decimalDigit">
<div *ngIf="decimalDigit.dirty && decimalDigit.errors">
  {{decimalDigit.errors.decimalDigit.errorMsg}}
</div>

• 6、mac地址【响应】

  <input type="text" [formControl]="mac" greatMac>
  <div *ngIf="mac.dirty && mac.errors">
    {{mac.errors.mac.errorMsg}}
  </div>

• 7、url地址【响应】

  <input type="text" [formControl]="url" greatUrl>
  <div *ngIf="url.dirty && url.errors">
    {{url.errors.url.errorMsg}}
  </div>