javascript - 我如何从 Angular 中的表单对象获取验证错误？

我做了一个包含我问题的 Stackblitz，我使用模板来显示错误，当我使用 form.errors 时，它返回 null，即使 form.get('oldPassword').errors 并没有返回 null

编辑
作为额外信息，当我为每个字段定义 getter 时，我会收到错误

get oldPassword() {
   return this.form.get('oldPassword')
}

编辑

这是我的代码正在运行

答案＃1

在这里查看此功能请求：https://github.com/angular/angular/issues/10530

FormGroup 的 errors 对象只有在 FormGroup 验证器返回错误时才不会为 null，而不会因为控件验证器而出现错误。

考虑一种情况，两者的值都可以，但它们的组合不可以。这时，FormGroup 验证器可能会返回类似 PasswordAndVerificationAreNotEqual 的内容。

查看从 Angular 2 FormGroup 获取所有验证错误以获取所有表单组错误的解决方案。

答案＃2

Angular 并没有将控制器错误暴露给 FormGroup https://github.com/angular/angular/issues/10530 但它确实处理 FormGroup 的 invalid 状态。

为了递归获取所有错误，我建议你使用类似如下的函数：

export function collectErrors(control: any): any | null {
  if (control.controls) {
    return Object.entries(control.controls).reduce(
      (acc, [key, childControl]) => {
        const childErrors = collectErrors(childControl);
        if (childErrors) {
          acc = { [key]: childErrors, ...acc };
        }
        return acc;
      },
      null
    );
  } else {
    return control.errors;
  }
}

然后你可以按如下方式使用它：

onClick() {
  console.log(collectErrors(this.form));
  console.log(this.form.get("oldPassword").errors);
}

Stackblitz 示例