angular+NG-ZORRO如何验证

angular+NG-ZORRO如何验证

1. 普通验证(required,emil,minlength,maxlength)

<nz-form-item>

   <nz-form-label [nzSm]="8" [nzXs]="12" nzRequired nzFor="intervalTime" >屏变化间隔时间</nz-form-label>

<nz-form-control [nzSm]="12" [nzXs]="24" >

    <input nz-input  name="intervalTime" #intervalTime="ngModel"  [(ngModel)]="entity.intervalTime"  (ngModelChange)="changeIpt(index,item.templateName)" required/>

<!-- 校验 -->

<nz-form-explain *ngIf="intervalTime.control.dirty&&intervalTime.control.errors">

     <ng-container *ngIf="intervalTime.control.hasError('required')">{{l('CanNotNull')}}</ng-container>

 </nz-form-explain>

 </nz-form-item>

 

1. 用户自定义的验证

<nz-form-item>

    <nz-form-label [nzSm]="8" [nzXs]="10"  nzFor="stimulationTimeStart" nzRequired>刺激间隔屏幕变化</nz-form-label>

     <nz-form-control [nzSm]="4" [nzXs]="6" >

       <input nz-input    name="stimulationTimeStart"  #stimulationTimeStart="ngModel"  [(ngModel)]="entity.stimulationTimeStart" (ngModelChange)="changeIpt(index,item.templateName)" required />

        </nz-form-control>

        <div nz-col nzSpan="1"  class="line-heights text-center">

            ~

        </div>

        <nz-form-control [nzSm]="4" [nzXs]="6">

            <input nz-input   name="stimulationTimeEnd"  #stimulationTimeEnd="ngModel"  [(ngModel)]="entity.stimulationTimeEnd" (ngModelChange)="changeIpt(index,item.templateName)" required  (keyup)="maxle(stimulationTimeEnd.control)"/>

 

          </nz-form-control>

        <div nz-col nzSpan="2"  class="line-heights">

            次

        </div>

<!-- 校验 -->

<nz-form-explain *ngIf=" stimulationTimeEnd.control.dirty&&stimulationTimeEnd.control.errors">

   <ng-container *ngIf=" stimulationTimeEnd.control.hasError('required')" >{{l('CanNotNull')}}</ng-container>

   <ng-container *ngIf="stimulationTimeEnd.control.hasError('maxle')">刺激间隔屏幕变化结果不能大于开始次数</ng-container>

   </nz-form-explain>

 </nz-form-item>

Ts执行

 

  maxle(con) {

    if (this.entity.stimulationTimeEnd < this.entity.stimulationTimeStart) {

      con.setErrors({ maxle: true })

    }

 

  }

 

 

保留图片文档

 

 

 

 

简单验证手机号的方法

HTML

      <nz-form-item>

        <nz-form-label [nzSm]="0" [nzXs]="10" nzRequired nzFor="mobilePhoneNumber">手机号码</nz-form-label>

        <nz-form-control [nzSm]="6" [nzXs]="14" >

          <input nz-input [(ngModel)]="entity.mobilePhoneNumber" name="mobilePhoneNumber" (keyup)="validaPhone(mobilePhoneNumber.control,mobilePhoneNumber)"  #mobilePhoneNumber="ngModel" required />

           <!-- 校验 -->

           <nz-form-explain *ngIf="mobilePhoneNumber.control.dirty&&mobilePhoneNumber.control.errors">

            <ng-container *ngIf="mobilePhoneNumber.control.hasError('validaPhone')">请输入正确的手机号码</ng-container>

          </nz-form-explain>

          <!-- 校验 -->

        </nz-form-control>

      </nz-form-item>

 

TS:

   //验证手机是否正确

   validaPhone(control,phone) {

     var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

     if (!myreg.test(phone.value)) {

       control.setErrors({ validaPhone: true })

    }