使用Mat-Error实现服务器端错误的最佳实践？

我的验证甚至自定义验证运行正常，有mat-error和反应形式，但是我试图直观地实现我的服务器端错误并且最终陷入混乱 .

我的服务器端错误是通过自定义验证器实现的，该验证器检查存储在this.serverErrors中的n express-validator映射错误响应 .

出现的问题是我希望在更新值或整个表单时删除错误，这样我就可以有一个禁用的提交按钮（这是可选的但是需要的功能）

我也通过ngIfs使用每个控件的多个mat-errors .

请有人指出我正确的方向处理服务器端错误，最好使用mat-errors显示？

谢谢 .

export class ServerForm implements OnInit {

public serverErrors;
public form: FormGroup;

constructor(
  private formBuilder: FormBuilder,
  private routing: Router
) {}

ngOnInit() {
  this.form.valueChanges.subscribe(changes => {
    if (this.hasErrors()) {

      // For each error, check if expiryField values are outdated mandating error reset.
      Object.keys(this.serverErrors).forEach(error => {
        let serverError = this.serverErrors[error];
        // If error outdated, remove and reset validation.
        if (this.checkServerErrorOutdated(serverError)) {
          // Remove may only remove error text but control may still be invalid.
          this.removeServerError(error);
          this.triggerControlValidation(serverError.control);
        }
      });
    }
  });
}

checkServerErrorOutdated(serverError) {
  let outdated = false;
  // Default check to param, replace with expiry fields if exist.
  let expiryChecks = [ serverError.param ];
  if ('expiryFields' in serverError) {
    expiryChecks = serverError.expiryFields;
  }

  // For each expiry field check if a value has updated, thus expiring the error.
  expiryChecks.forEach(check => {
    let invalidValue = serverError.invalidValues[check];
    let currentValue = serverError.control.parent.value[check];
    if (currentValue !== invalidValue) { outdated = true; }
  });

  return outdated;
}

triggerControlValidation(control) {
  control.markAsTouched();       
  control.updateValueAndValidity();
}

triggerValidation() {
  Object.keys(this.form.controls).forEach(field => {
    let control = this.form.get(field);            
    this.triggerControlValidation(control);
  });
}

serverErrorValidator(errorKeyCode, errorKey, expiryFields?): ValidatorFn  {
  // May need to add server error keys to class property...
  return (control: AbstractControl): {[ key: string ]: any} | null => {
    let value = control.value;
    let error = {}; error[errorKeyCode] = value;
    let serverError = this.getServerError(errorKey);

    if (serverError) {
      // Add form values and control to error.
      serverError.invalidValues = control.parent.value;
      serverError.control = control;

      // Add fields which trigger error expiration to error.
      if (expiryFields) {
        serverError.expiryFields = expiryFields
      }
    }

    return serverError ? error : null;
  };
}

removeServerError(type) {
  if (type in this.serverErrors)
    delete this.serverErrors[type];
}

clearServerErrors() {
  Object.keys(this.serverErrors).forEach(field => {
    this.removeServerError(field);
  });
}

getServerErrorMsg(type) {
  let error = this.getServerError(type);
  return error ? error.msg : null;
}

getServerError(type) {
  let error = null;
  if (this.hasErrors() && type in this.serverErrors) {
    error = this.serverErrors[type];
  }

  return error ? error : null;
}

hasErrors() {
  return Boolean(this.serverErrors);
}

handleErrors(response) {
  if ('errors' in response) {
    this.serverErrors = response.errors;
  } else {
    this.clearServerErrors();
  }
}
}