Get all validation errors from Angular 2 FormGroup

Question

Given this code   this form   this formBuilder group         email        Validators required  EmailValidator isValid          hasAcceptedTerms   false  Validators pattern  true              How can I get all validation errors from this form   I m writing unit tests and want to include the actual validation errors in the assert message

User · Answer

Try This   it will call validation for all control in form    validateAllFormControl formGroup  FormGroup               Object keys formGroup controls  forEach field   gt          const control   formGroup get field                    if  control instanceof FormControl                       control markAsTouched   onlySelf  true           else if  control instanceof FormGroup                  this validateAllFormControl control

User · Answer

This is solution with FormGroup inside supports   like here    Tested on  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   gt        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   gt            errors push             control name  key            error name  keyError            error value  controlErrors  keyError                                       return errors      Using example   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

User · Answer

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    gt                                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   amp  amp  c errors                            Object keys c errors  map  messageKey    gt                                if  this validationMessages controlKey  messageKey                                     messages controlKey     this validationMessages controlKey  messageKey                                                                                                                                            return messages        I took it from Deborahk and modified it a little bit

User · Answer

I am using angular 5 and you can simply check the status property of your form using FormGroup e g   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 would be  INVALID  unless all the fields pass all the validation rules   The best part is that it detects changes in real-time

User · Answer

I met the same problem and for finding all validation errors and displaying them  I wrote next method   getFormValidationErrors       Object keys this productForm controls  forEach key   gt       const controlErrors  ValidationErrors   this productForm get key  errors    if  controlErrors    null            Object keys controlErrors  forEach keyError   gt              console log  Key control      key      keyError      keyError      err value     controlErrors keyError                                      Form name productForm should be changed to yours   It works in next way  we get all our controls from form in format   p  string   AbstractControl  and iterate by each error key  for get details of error  It skips null error values   It also can be changed for displaying validation errors on the template view  just replace console log     to what you need

User · Answer

Based on the  MixerOID response  here is my final solution as a component  maybe I create a library   I also support FormArray s   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 lt any gt      private errors  AllValidationErrors       constructor      private translateService  TranslateService           this errors           this messages              ngOnInit         this form valueChanges subscribe      gt          this errors             this calculateErrors this form                this calculateErrors this form          calculateErrors form  FormGroup   FormArray        Object keys form controls  forEach field   gt          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   gt              this errors push               controlName  field              errorName  keyError              errorValue  controlErrors keyError                                                    This removes duplicates     this errors   this errors filter  error  index  self    gt  self findIndex t   gt          return t controlName     error controlName  amp  amp  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                And the HTML    lt div  ngIf  formRef submitted  gt     lt div  ngFor  let error of errors  class  text-danger  gt        getErrorMessage error       lt  div gt   lt  div gt    Usage    lt app-form-errors  form   languageForm                    formRef   formRef                    messages    language   Language    gt   lt  app-form-errors gt

User · Answer

IF not populated correctly - you could get aggregated FormGroup errors object let getErrors    formGroup  FormGroup  errors  any           Object keys formGroup controls  forEach field   gt        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

User · Answer

For whom it might concern - I tweaked around with Andreas code in order to get all errors code in a flat object for easier logging errors that might appear  Please consider  export function collectErrors control  AbstractControl   any   null     let errors         let recursiveFunc    control  AbstractControl    gt        if  isFormGroup control           return Object entries control controls  reduce           acc   key  childControl     gt              const childErrors   recursiveFunc childControl             if  childErrors                if   isFormGroup childControl                   errors        errors   key   childErrors                              acc        acc   key   childErrors                          return acc                     null                else         return control errors               recursiveFunc control     return errors

User · Answer

This is another variant that collects the errors recursively and does not depend on any external library like lodash  ES6 only    function isFormGroup control  AbstractControl   control is FormGroup     return     lt FormGroup gt control  controls     function collectErrors control  AbstractControl   any   null     if  isFormGroup control         return Object entries control controls         reduce           acc   key  childControl     gt              const childErrors   collectErrors childControl             if  childErrors                acc       acc   key   childErrors                         return acc                     null              else       return control errors

User · Answer

You can iterate over this form errors property

User · Answer

Or you can just use this library to get all errors  even from deep and dynamic forms    npm i  naologic forms   If you want to use the static function on your own forms  import  NaoFormStatic  from   naologic forms       const errorsFlat   NaoFormStatic getAllErrorsFlat fg    console log errorsFlat     If you want to use NaoFromGroup you can import and use it  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         -- gt   first   ok  false  isSSN  false  actualValue   000 00 0000      Read the full documentation

User · Answer

Recursive way to retrieve all the errors from an Angular form  after creating any kind of formulary structure there s no way to retrieve all the errors from the form  This is very useful for debugging purposes but also for plotting those errors   Tested for 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   gt                   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  gt  0   formErrors   null

User · Answer

For a large FormGroup tree  you can use lodash to clean up the tree and get a tree of just the controls with errors  This is done by recurring through child controls  e g  using allErrors formGroup    and pruning any fully-valid sub groups of controls   private isFormGroup control  AbstractControl   control is FormGroup     return     lt FormGroup gt 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    gt          return this allErrors childControl                const pruned     omitBy childErrors    isEmpty       return   isEmpty pruned    null   pruned      else       return control errors

[angular] Get all validation errors from Angular 2 FormGroup

Examples related to angular

Examples related to typescript

Examples related to validation