Ottieni tutti gli errori di convalida da Angular 2 FormGroup

Dato questo codice:

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

Come posso ottenere tutti gli errori di validazione da this.form ?

Sto scrivendo unit test e voglio includere gli errori di convalida effettivi nel messaggio di asserzione.

Ho incontrato lo stesso problema e per aver trovato tutti gli errori di validazione e averli visualizzati, ho scritto il seguente metodo:

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

Nome del modulo productForm dovrebbe essere cambiato al tuo.

Funziona in un secondo momento: prendiamo tutti i nostri controlli dalla forma nel formato {[p: string]: AbstractControl} e iteriamo da ogni chiave di errore, per ottenere i dettagli dell’errore. Salta null valori di errore null .

Può anche essere modificato per visualizzare gli errori di convalida nella vista del modello, basta sostituire console.log(..) con ciò che ti serve.

Questa è la soluzione con FormGroup all’interno di supporti ( come qui )

Testato su: Angolare 4.3.6

get-form-validazione-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; } 

Utilizzando l’esempio :

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

Oppure puoi semplicemente usare questa libreria per ottenere tutti gli errori, anche da forms profonde e dinamiche.

 npm install --save npm i @naologic/forms 

Allora vorrai

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

Quindi basta passare FormGroup per recuperare tutti i tuoi errori

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

AGGIORNARE:

È ansible utilizzare npm i @naologic/forms e utilizzare NaoFromGroup anziché il classico gruppo di moduli da angular. Ha alcune nuove funzioni e puoi anche ottenere tutti gli errori.

Spiacente, non ci sono ancora documenti, basta guardare il codice.

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

L’ho preso da Deborahk e l’ ho modificato un po ‘.

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

Sto usando angular 5 e puoi semplicemente controllare la proprietà di stato del tuo modulo usando FormGroup ad es

 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 sarebbe “INVALID” a meno che tutti i campi non superassero tutte le regole di validazione.

La parte migliore è che rileva i cambiamenti in tempo reale.

Prova questo, chiamerà la convalida per tutto il controllo in 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); } }); } 

È ansible eseguire iterazioni sulla proprietà this.form.errors.