素材牛VIP会员
angular4中响应式表单的验证如何做到统一错误处理?
 封***榜  分类:JavaScript  人气:1332  回帖:1  发布于6年前 收藏

各位大家,请问下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>这段代码

谢谢!

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv7 码师
雪***狐 职业无 6年前#1

可以的。简略代码如下:
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] + ' ';
        }
    }
}
  
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取