各位大家,请问下angular4中响应式表单的验证如何做到统一错误处理?
我看了angular4的很多例子(包含官网),验证错误都是单独写的
如:
<div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('name')">
<nz-input formControlName="name" [nzId]="'name'"></nz-input>
<div nz-form-explain *ngIf="validateFormControl('name','required')">名称必填</div>
<div nz-form-explain *ngIf="validateFormControl('name','rangeLength')">名称最多100个字符 </div>
<div nz-form-explain *ngIf="validateFormControl('name','servererror')" class="servererror">{{getErrorValueForFormControl('name','servererror')}}</div>
</div>
这样界面感觉好多重复代码,能不能做统一处理,如检查的名称没有填写,自动生成<div nz-form-explain *ngIf="validateFormControl('name','required')">名称必填</div>这段代码
谢谢!
可以的。简略代码如下:
html:
<input type="text" formControlName="account">
<div *ngIf="formErrors.account" class="alert alert-danger">{{ formErrors.account }}</div>
<input type="password" formControlName="password">
<div *ngIf="formErrors.password" class="alert alert-danger">{{ formErrors.password }}</div>
ts:
editForm: FormGroup;
formErrors = {
'account': '',
'password': ''
};
validationMessages = {
'account': {
'required': '请输入用户名',
'maxlength': '用户名不能超过20位'
},
'password': {
'required': '请输入密码',
'minlength': '密码至少6位',
'maxlength': '密码必须小于16位',
'pattern': '密码需要包含大小写和数字'
}
};
ngOnInit() {
this.editForm = new FormGroup({
account: new FormControl('', [Validators.required, Validators.maxLength(20)]),
password: new FormControl('', [
Validators.minLength(6),
Validators.maxLength(16),
Validators.required,
Validators.pattern('^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z])[0-9a-zA-Z]{6,16}$')
])
});
this.editForm.valueChanges.subscribe(() => this.onValueChanged()); // 监听每次输入内容,获得错误信息
}
onValueChanged() {
for (const item in this.formErrors) {
this.formErrors[item] = '';
for (const key in this.editForm.get(item).errors) {
this.formErrors[item] += this.validationMessages[item][key] + ' ';
}
}
}