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.