angular表单校验
2019-04-18 本文已影响0人
窗外的雪儿飞
最近在写项目的时候,产品要求对表单的必填输入项进行友好的校验提示,效果如图:
表单校验提示
" 这个需求很简单,怎么实现我不管。 " ,还能说什么,就是干,具体实现如下:
- 对Angular内置的表单css属性设置想要的样式
// css样式
.isvalid {
border: 1px dashed red !important;
}
- html文件里设置即时样式检测
[class.isvalid]
<!--非formArray-->
<input formControlName="addressName [class.isvalid]="isFieldInvalidTouched('addressName')" type="text" placeholder="请输入收件人姓名">
<!--formArray-->
<input formControlName="addressName [class.isvalid]="isArrayFieldInvalidTouched(i, 'addressName')" type="text" placeholder="请输入收件人姓名">
- ts文件里注入核心方法
// 表单字段校验
validateAllFormFields(formGroup: any) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
} else if (control instanceof FormArray) {
this.validateAllFormFields(control);
}
});
}
// 表单控件校验
isFieldInvalidTouched(field: any) {
return this.form.get(field).invalid && this.form.get(field).touched;
}
// 表单控件校验
isArrayFieldInvalidTouched(index, field: any) {
return this.xxxArray.controls[index].get(field).invalid &&this.xxxArray.controls[index].get(field).touched;
}
// 获取FormArray
get xxxArray(): FormArray {
return this.form.get('xxxArray') as FormArray;
}
// 设置FormArray
set setXxxArray() {
// TODO
}
// 表单提交
ensure() {
if (!this.form.valid) {
this.validateAllFormFields(this.form);
this.orderService.presentToast('表单信息不全, 请填写完整~');
} else {
// TODO
}
}