从 Angular 2 FormGroup 获取所有验证错误

Question

鉴于此代码：

 this.form = this.formBuilder.group({
  email: ['', [Validators.required, EmailValidator.isValid]],
  hasAcceptedTerms: [false, Validators.pattern('true')]
});

如何从 this.form 获取所有验证错误？

我正在编写单元测试，并希望在断言消息中包含实际的验证错误。

原文由 EagleBeak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了同样的问题，为了找到所有验证错误并显示它们，我写了这个方法：

 getFormValidationErrors() {
  Object.keys(this.productForm.controls).forEach(key => {
    const controlErrors: ValidationErrors = this.productForm.get(key).errors;
    if (controlErrors != null) {
      Object.keys(controlErrors).forEach(keyError => {
       console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
      });
    }
  });
}

表单名称 productForm 应该更改为您的表单实例名称。

它以这种方式工作：我们从表单中获取所有控件，格式为 {[p: string]: AbstractControl} 并按每个错误键进行迭代，以获取错误的详细信息。它会跳过 null 错误值。

它也可以更改为在模板视图上显示验证错误，只需将 console.log(..) 替换为您需要的。

原文由 Oleksandr Yefymov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

调整 接受的答案 以返回一个字符串，然后可以将其打印到控制台：

 function getFormValidationErrors(form: FormGroup): string {
    return Object.keys(form.controls)
        .map((control) => {
            const controlErrors = form.get(control).errors;
            if (!controlErrors) {
                return [];
            }
            const controlErrorsString = Object.keys(controlErrors)
                .flatMap(
                    (keyError) => `${keyError}: ${controlErrors[keyError]}`
                )
                .join(', ');
            return `${control}: {${controlErrorsString}}`;
        })
        .filter((list) => list.length > 0)
        .join('\n');
}

原文由 A.Wan 发布，翻译遵循 CC BY-SA 4.0 许可协议