angular4中響應(yīng)式表單的驗(yàn)證如何做到統(tǒng)一錯(cuò)誤處理？

可以的。簡(jiǎn)略代碼如下:
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': '請(qǐng)輸入用戶名',
        'maxlength': '用戶名不能超過20位'
    },
    'password': {
        'required': '請(qǐng)輸入密碼',
        'minlength': '密碼至少6位',
        'maxlength': '密碼必須小于16位',
        'pattern': '密碼需要包含大小寫和數(shù)字'
    }
};

 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());   // 監(jiān)聽每次輸入內(nèi)容，獲得錯(cuò)誤信息
  }
  
  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] + ' ';
        }
    }
}
  

題主用的是template driven的 form validation, 我再寫一個(gè)reactive form validation 的例子，你可以選擇一下看哪個(gè)更方便。
使用reactive form， 你需要定義一個(gè)FormControl的對(duì)象，而不是直接在元素上使用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里面都需要類似的自定義驗(yàn)證，你也可以把方法提出來作為公共的驗(yàn)證。