提交按钮上的电子表格错误处理

Question

单击“提交”按钮时如何显示所有必需的错误？

现在，当我在特定输入上键入时显示错误，但是我也希望当我在不输入输入字段的情况下在提交按钮上键入错误时，必须显示每个输入字段的所有错误。

Answer 1

这里是将通过传递所有表单控件来返回所有表单错误的代码

仅创建接口

export interface AllValidationErrors {
  control_name: string;
  error_name: string;
  error_value: any;
}

export interface FormGroupControls {
  [key: string]: AbstractControl;
}

并创建一个通用函数，它将表单控件作为参数并返回错误数组

export function getFormValidationErrors(
  controls: FormGroupControls
): AllValidationErrors[] {
  let errors: AllValidationErrors[] = [];
  Object.keys(controls).forEach(key => {
    const control = controls[key];
    if (control instanceof FormGroup) {
      errors = errors.concat(getFormValidationErrors(control.controls));
    }
    const controlErrors: ValidationErrors = controls[key].errors;
    if (controlErrors !== null) {
      Object.keys(controlErrors).forEach(keyError => {
        errors.push({
          control_name: key,
          error_name: keyError,
          error_value: controlErrors[keyError]
        });
      });
    }
  });

  return errors;
}

您的情况下如何使用

当单击提交按钮时就这样通过

submit(){
    const error: AllValidationErrors[] = getFormValidationErrors(
      this.SignupForm.controls
    );
    console.log(error);
}

希望这对您有帮助

让我知道您是否还需要其他谢谢