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

90

给出以下代码：

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

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

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

angular  typescript  validation 
— 鹰嘴
source
您可以/应该使用Validators.requiredTrue代替Validators.pattern（'true'）来强制选中复选框。
— 虚空

Answers:

141

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

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(..)为所需即可。

— 亚历克斯·埃菲莫夫
source
2
如何以相同的模式扩展FormArray的上述方法？
— 穆罕默德·沙拉夫·阿里
您是' + controlErrors[keyErrors];不是要说', controlErrors[keyErrors];？
— ryanm '18
@ryanm不，在打印对象或字符串值方面有所不同。
— 亚历克斯·埃菲莫夫18'Apr
从哪里可以导入ValidationErrorsangular 2？
— sainu
import { ValidationErrors } from '@angular/forms';
— Craig Wayne
31

这是带有FormGroup内部支撑的解决方案（例如此处）

测试于：Angular 4.3.6

获取表单验证错误.ts

import { AbstractControl, FormGroup, ValidationErrors } from '@angular/forms';

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;
}

使用示例：

if (!this.formValid()) {
  const error: AllValidationErrors = getFormValidationErrors(this.regForm.controls).shift();
  if (error) {
    let text;
    switch (error.error_name) {
      case 'required': text = `${error.control_name} is required!`; break;
      case 'pattern': text = `${error.control_name} has wrong pattern!`; break;
      case 'email': text = `${error.control_name} has wrong email format!`; break;
      case 'minlength': text = `${error.control_name} has wrong length! Required length: ${error.error_value.requiredLength}`; break;
      case 'areEqual': text = `${error.control_name} must be equal!`; break;
      default: text = `${error.control_name}: ${error.error_name}: ${error.error_value}`;
    }
    this.error = text;
  }
  return;
}
— 混合器OID
source
1
角度5更改-const controlErrors：ValidationErrors = form.controls [key] .errors;
— 克里斯·基尔顿
建议检查是否真实，controlErrors 即如果错误为if (controlErrors) {nullundefined
— mtholen
8

这是另一种以递归方式收集错误并且不依赖于任何外部库的变体，例如lodash（仅ES6）：

function isFormGroup(control: AbstractControl): control is FormGroup {
  return !!(<FormGroup>control).controls;
}

function collectErrors(control: AbstractControl): any | null {
  if (isFormGroup(control)) {
    return Object.entries(control.controls)
      .reduce(
        (acc, [key, childControl]) => {
          const childErrors = collectErrors(childControl);
          if (childErrors) {
            acc = {...acc, [key]: childErrors};
          }
          return acc;
        },
        null
      );
  } else {
    return control.errors;
  }
}
— 安德烈亚斯·克洛伯（AndreasKlöber）
source
6

从Angular表单中检索所有错误的递归方法，创建任何种类的公式结构后，都无法从表单中检索所有错误。这对于调试目的非常有用，但对于绘制这些错误也非常有用。

经过Angular 9测试

getFormErrors(form: AbstractControl) {
    if (form instanceof FormControl) {
        // Return FormControl errors or null
        return form.errors ?? null;
    }
    if (form instanceof FormGroup) {
        const groupErrors = form.errors;
        // Form group can contain errors itself, in that case add'em
        const formErrors = groupErrors ? {groupErrors} : {};
        Object.keys(form.controls).forEach(key => {
            // Recursive call of the FormGroup fields
            const error = this.getFormErrors(form.get(key));
            if (error !== null) {
                // Only add error if not null
                formErrors[key] = error;
            }
        });
        // Return FormGroup errors or null
        return Object.keys(formErrors).length > 0 ? formErrors : null;
    }
}
— ArnauTG
source
我正在使用Angular 7，并对您的代码进行了两项修改：form.errors ?? null我必须删除??。进行编译。更重要的是，在FormGroup检查条件下，我添加了|| formParameter instanceof FormArray，这确实打开了我的应用程序。谢谢！
— 泰勒·福赛斯
6

或者，您可以仅使用此库来获取所有错误，即使是来自深层和动态形式的错误也是如此。 

npm i @naologic/forms

如果要在自己的表单上使用静态函数

import {NaoFormStatic} from '@naologic/forms';
...
const errorsFlat = NaoFormStatic.getAllErrorsFlat(fg); 
console.log(errorsFlat);

如果要使用NaoFromGroup，可以导入和使用

import {NaoFormGroup, NaoFormControl, NaoValidators} from '@naologic/forms';
...
    this.naoFormGroup = new NaoFormGroup({
      firstName: new NaoFormControl('John'),
      lastName: new NaoFormControl('Doe'),
      ssn: new NaoFormControl('000 00 0000', NaoValidators.isSSN()),
    });

   const getFormErrors = this.naoFormGroup.getAllErrors();
   console.log(getFormErrors);
   // --> {first: {ok: false, isSSN: false, actualValue: "000 00 0000"}}

阅读完整的文档

— ian0_M4n
source
2

基于@MixerOID响应，这是我作为组件的最终解决方案（也许我创建了一个库）。我也支持FormArray：

import {Component, ElementRef, Input, OnInit} from '@angular/core';
import {FormArray, FormGroup, ValidationErrors} from '@angular/forms';
import {TranslateService} from '@ngx-translate/core';

interface AllValidationErrors {
  controlName: string;
  errorName: string;
  errorValue: any;
}

@Component({
  selector: 'app-form-errors',
  templateUrl: './form-errors.component.html',
  styleUrls: ['./form-errors.component.scss']
})
export class FormErrorsComponent implements OnInit {

  @Input() form: FormGroup;
  @Input() formRef: ElementRef;
  @Input() messages: Array<any>;

  private errors: AllValidationErrors[];

  constructor(
    private translateService: TranslateService
  ) {
    this.errors = [];
    this.messages = [];
  }

  ngOnInit() {
    this.form.valueChanges.subscribe(() => {
      this.errors = [];
      this.calculateErrors(this.form);
    });

    this.calculateErrors(this.form);
  }

  calculateErrors(form: FormGroup | FormArray) {
    Object.keys(form.controls).forEach(field => {
      const control = form.get(field);
      if (control instanceof FormGroup || control instanceof FormArray) {
        this.errors = this.errors.concat(this.calculateErrors(control));
        return;
      }

      const controlErrors: ValidationErrors = control.errors;
      if (controlErrors !== null) {
        Object.keys(controlErrors).forEach(keyError => {
          this.errors.push({
            controlName: field,
            errorName: keyError,
            errorValue: controlErrors[keyError]
          });
        });
      }
    });

    // This removes duplicates
    this.errors = this.errors.filter((error, index, self) => self.findIndex(t => {
      return t.controlName === error.controlName && t.errorName === error.errorName;
    }) === index);
    return this.errors;
  }

  getErrorMessage(error) {
    switch (error.errorName) {
      case 'required':
        return this.translateService.instant('mustFill') + ' ' + this.messages[error.controlName];
      default:
        return 'unknown error ' + error.errorName;
    }
  }
}

和HTML：

<div *ngIf="formRef.submitted">
  <div *ngFor="let error of errors" class="text-danger">
    {{getErrorMessage(error)}}
  </div>
</div>

用法：

<app-form-errors [form]="languageForm"
                 [formRef]="formRef"
                 [messages]="{language: 'Language'}">
</app-form-errors>
— Ismaestro
source
2

试试这个，它将以以下形式调用所有控件的验证：

validateAllFormControl(formGroup: FormGroup) {         
  Object.keys(formGroup.controls).forEach(field => {  
    const control = formGroup.get(field);             
    if (control instanceof FormControl) {             
      control.markAsTouched({ onlySelf: true });
    } else if (control instanceof FormGroup) {        
      this.validateAllFormControl(control);            
    }
  });
}
— Mayur Dongre
source
1 
export class GenericValidator {
    constructor(private validationMessages: { [key: string]: { [key: string]: string } }) {
    }

processMessages(container: FormGroup): { [key: string]: string } {
    const messages = {};
    for (const controlKey in container.controls) {
        if (container.controls.hasOwnProperty(controlKey)) {
            const c = container.controls[controlKey];
            if (c instanceof FormGroup) {
                const childMessages = this.processMessages(c);
                // handling formGroup errors messages
                const formGroupErrors = {};
                if (this.validationMessages[controlKey]) {
                    formGroupErrors[controlKey] = '';
                    if (c.errors) {
                        Object.keys(c.errors).map((messageKey) => {
                            if (this.validationMessages[controlKey][messageKey]) {
                                formGroupErrors[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
                            }
                        })
                    }
                }
                Object.assign(messages, childMessages, formGroupErrors);
            } else {
                // handling control fields errors messages
                if (this.validationMessages[controlKey]) {
                    messages[controlKey] = '';
                    if ((c.dirty || c.touched) && c.errors) {
                        Object.keys(c.errors).map((messageKey) => {
                            if (this.validationMessages[controlKey][messageKey]) {
                                messages[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
                            }
                        })
                    }
                }
            }
        }
    }
    return messages;
}
}

我从Deborahk拿来，并做了一些修改。

— 邦加什
source
1 
// IF not populated correctly - you could get aggregated FormGroup errors object
let getErrors = (formGroup: FormGroup, errors: any = {}) {
  Object.keys(formGroup.controls).forEach(field => {
    const control = formGroup.get(field);
    if (control instanceof FormControl) {
      errors[field] = control.errors;
    } else if (control instanceof FormGroup) {
      errors[field] = this.getErrors(control);
    }
  });
  return errors;
}

// Calling it:
let formErrors = getErrors(this.form);
— 尿石
source
0

您可以遍历this.form.errors属性。

— 不安全的
source
14
我猜this.form.errors这只返回的验证错误this.form，而不是this.form.controls。您可以分别验证FormGroups及其子级（FormGroups，FormControls和FormArrays的任意数量）。要获取所有错误，我认为您需要递归地询问它们。
— RistoVälimäki16年
0

对于大型FormGroup树，可以使用lodash清理树并获取仅包含错误的控件的树。通过重复执行子控件（例如使用allErrors(formGroup)），然后修剪控件的所有完全有效的子组来完成此操作：

private isFormGroup(control: AbstractControl): control is FormGroup {
  return !!(<FormGroup>control).controls;
}

// Returns a tree of any errors in control and children of control
allErrors(control: AbstractControl): any {
  if (this.isFormGroup(control)) {
    const childErrors = _.mapValues(control.controls, (childControl) => {
      return this.allErrors(childControl);
    });

    const pruned = _.omitBy(childErrors, _.isEmpty);
    return _.isEmpty(pruned) ? null : pruned;
  } else {
    return control.errors;
  }
}
— 奥列克斯·波诺马连科（Olex Ponomarenko）
source
-2

我使用的是角度5，您可以使用FormGroup来简单地检查表单的状态属性，例如

this.form = new FormGroup({
      firstName: new FormControl('', [Validators.required, validateName]),
      lastName: new FormControl('', [Validators.required, validateName]),
      email: new FormControl('', [Validators.required, validateEmail]),
      dob: new FormControl('', [Validators.required, validateDate])
    });

除非所有字段均通过所有验证规则，否则this.form.status将为“无效”。

最好的部分是它可以实时检测变化。

— 加根
source
1
是的，但是我们需要获取整个表单组的错误，而不仅仅是知道它是否无效
— Motassem MK
OP需要验证消息，该消息不包含在status属性中，因为它只是一个布尔值。
— Stefan '18
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.