angular2对于表单的自定义验证

.ts文件中：

ngOnInit() {

let self = this;

self.validateForm = this.fb.group({ //表单初始化

num:['',[Validators.required]],

letter:['',[Validators.required]],

line:['',[Validators.required]],

specialcharactop:['',[Validators.required]],

converslocktime: ['', [Validators.required,Validators.pattern(/^(?:0|[1-9]\d*)(?:\.\d*[1-9])?$/)]],

minlength: ['', [Validators.required,Validators.pattern(/^[1-9]\d*$/)]],

count: ['', [Validators.required,Validators.pattern(/^[1-9]\d*$/)]],

locktime: ['', [Validators.required,Validators.pattern(/^(?:0|[1-9]\d*)(?:\.\d*[1-9])?$/)]],

singlelog: ['', [Validators.required,Validators.pattern(/^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/)]],

}, );

}

html中：

<nz-form-item>

<nz-form-label [nzSpan]="8">单一登陆</nz-form-label>

<nz-form-control [nzSpan]="8" >

<input nz-input formControlName="singlelog" type="text" id="singlelog" placeholder="请输入单一登陆IP地址">

<nz-form-explain *ngIf="validateForm.get('singlelog').dirty && validateForm.get('singlelog').errors">请输入正确的IP地址！</nz-form-explain>

</nz-form-control>

</nz-form-item >

 

对于复选框的校验：

<nz-form-control [nzSpan]="8">

<label nz-checkbox [(ngModel)]="num" formControlName="num">数字</label>

<label nz-checkbox [(ngModel)]="letter" formControlName="letter">字母</label>

<label nz-checkbox [(ngModel)]="line" formControlName="line">下划线</label>

<label nz-checkbox [(ngModel)]="specialcharactop" formControlName="specialcharactop">特殊字符</label>

<nz-form-explain *ngIf="validateForm.get('num').dirty && (validateForm.controls['num']?.value)!=true && (validateForm.controls['letter']?.value)!=true && (validateForm.controls['line']?.value)!=true && (validateForm.controls['specialcharactop']?.value)!=true">请至少选择一项！</nz-form-explain>

<input nz-input formControlName="minlength" type="number" id="minlength" placeholder="请输入密码最小长度">

<nz-form-explain *ngIf="validateForm.get('minlength').dirty && validateForm.get('minlength').errors">请输入数字！</nz-form-explain>

</nz-form-control>