validation - validator - Obtenga todos los errores de validación de Angular 2 FormGroup

form validation angular 5

Question

Dado este código:

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

¿Cómo puedo obtener todos los errores de validación de este this.form ?

Estoy escribiendo pruebas unitarias y quiero incluir los errores de validación reales en el mensaje de afirmación.

Answer 1

Encontré el mismo problema y para encontrar todos los errores de validación y mostrarlos, escribí el siguiente método:

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

El nombre del formulario productForm debe cambiarse al tuyo.

Funciona de la siguiente manera: obtenemos todos nuestros controles desde el formulario en formato {[p: string]: AbstractControl} e iteramos con cada clave de error, para obtener detalles del error. Se salta valores de error null .

También se puede cambiar para mostrar errores de validación en la vista de plantilla, simplemente reemplace console.log(..) a lo que necesite.

Answer 2

Esta es una solución con FormGroup dentro de los soportes ( como aquí )

Probado en: Angular 4.3.6

get-form-validation-errors.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;
}

Usando el ejemplo :

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

Answer 3

Estoy usando angular 5 y simplemente puede verificar la propiedad de estado de su formulario usando FormGroup, por ejemplo

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 sería "INVALID" a menos que todos los campos pasen todas las reglas de validación.

La mejor parte es que detecta cambios en tiempo real.

Answer 4

Intente esto, se llamará validación para todos los controles en forma:

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.validateAllFormFields(control);            
    }
  });
}

Answer 5

O simplemente puede usar esta biblioteca para obtener todos los errores, incluso de formas profundas y dinámicas.

npm install --save npm i @naologic/forms

Querrás entonces

import {SuperForm} from ''npm i @naologic/forms'';

Luego simplemente pase el FormGroup para recuperar todos sus errores

const errorsFlat = SuperForm.getAllErrorsFlat(fg); 
console.log(errorsFlat);

ACTUALIZAR:

Puede usar npm i @naologic/forms y usar NaoFromGroup lugar del clásico grupo de formas angular. Tiene algunas funciones nuevas, y también puede obtener todos los errores.

Lo sentimos, no hay documentos todavía, solo mira el código.

ACTUALIZAR:

el lib requiere angular 6 porque usa AbstractControlOptions

Answer 6

Puedes iterar sobre esta propiedad.form.errors.

Answer 7

// 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);

Answer 8

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

Lo tomé de Deborahk y lo modifiqué un poco.