angular4中响应式表单的验证如何做到统一错误处理？

Question

各位大家，请问下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>

这段代码

谢谢！

Answer 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] + ' ';
        }
    }
}
  

Answer 2

题主用的是template driven的 form validation, 我再写一个reactive form validation 的例子，你可以选择一下看哪个更方便。
使用reactive form， 你需要定义一个FormControl的对象，而不是直接在元素上使用formControlName指令了。

Template代码：

 <nz-input [formControl]="formCtrl" [nzId]="'name'"></nz-input>
 <ng-container *ngIf="validateFormControl(formCtrl).invalid">
    <p class="alert alert-danger">{{validateFormControl(formCtrl).messages}}</p>
 </ng-container>

TS代码

formGrp: FormGroup;
formCtrl: FormControl = new FormControl("");

ngOnInit(): void {
    this.formGrp = new FormGroup({});
    this.formGrp.addControl("formCtrlId", this.formCtrl);
}

validateFormControl(ctrl: FormControl): ValidationResult {
      let validation: ValidationResult = { invalid: false, messages: "" };
        if (ctrl.errors && ctrl.errors.required) {
            validation.invalid = true;
            validation.messages = "Required";
        } else if (ctrl.errors && formControl.errors.requiredlength) {
            validation.invalid = true;
            validation.messages = "Required length";
        } else if (ctrl.errors && ctrl.errors.servererror ) {
            validation.invalid = true;
            validation.messages = "Server has error...";
        }
        return validation;
}

interface ValidationResult {
    invalid: boolean;
    messages: string;
}

如果你很多component里面都需要类似的自定义验证，你也可以把方法提出来作为公共的验证。

Answer 3

推荐使用 https://github.com/why520craz... ，统一验证错误提示