html(模板)部分 ============================================================================
<form nz-form [formGroup]="addNodeForm">
<input nz-input [formControlName]="'nName'" [(ngModel)]="nName" placeholder="请输入节点名称">
<div class="error-warning" *ngIf="addNodeForm.get('nName').invalid && (addNodeForm.get('nName').dirty || addNodeForm.get('nName').touched)" >
<div [hidden]="!addNodeForm.hasError('required','nName')">请填写节点名称</div>
</div>
</form>
注意:
1、需要验证的单元一定要加个 [formControlName]="'nName'" ,
[(ngModel)]="nName"可以不用,在组件里获取方式是: this.addNodeForm.controls['nName'].value;
2、注意这里错误信息是否显示的判断方式:
*ngIf="addNodeForm.get('nName').invalid && (addNodeForm.get('nName').dirty || addNodeForm.get('nName').touched)"
.invalid表示 nName 验证不通过
.dirty .touched是要nName 表单触发过才验证
3、<div [hidden]="!addNodeForm.hasError('required','nName')">请填写节点名称</div> 表示字段为空时显示的提示
组件部分============================================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
....
export class myComponent implements OnInit {
constructor(public fb: FormBuilder) {}
public addNodeForm:FormGroup;
ngOnInit() {
const self = this;
self.addNodeForm = self.fb.group({
nName:['',[Validators.required]],
});
}
...
}
注意:
self.addNodeForm = self.fb.group({
nName:['',[Validators.required]],
});
验证的字段和规则都写在这里,这里只是验证了非空,你还可以验证字符长度,正则等等;
直接在nName:['',[Validators.required , ... , ...]]这样加就行了
最后:
1、提供下重置验证的方式:
this.addNodeForm.reset();
2、主动取消一个单元的验证:
this.addNodeForm.get('nName').clearValidators();
this.addNodeForm.get('nName').markAsPristine();
主动添加一个单元的验证:
this.addDataForm.get('nName').setValidators(Validators.required);
this.addDataForm.get('nName').markAsDirty();
3、提交表单的时候,做一次验证的封装方法:
// 表单验证
public validate(_validateForm) {
for (const i in _validateForm.controls) {
_validateForm.controls[ i ].markAsDirty();
_validateForm.controls[ i ].updateValueAndValidity();
}
if (!_validateForm.valid) {
return false;
}
return true;
}