Angular — Display every validation errors for your form

Angular (logo src: https://bit.ly/2RmhEhV)

Angular form validation provides us an easy to use form validation checks. However, it starts getting complex when the number of field grows and the validation rules become conditional.

One might have no idea why the validation rule failed. Therefore, it would be cool to to click a button and get displayed what were the rules that failed.

First, lets take a simple sign up form with fields firstName, lastName, dob, email and termsCheckbox with validation rules:

Sign Up Form

[Update!]

If you want to show errors for only a single FormControl, then you can just use Angular’s JsonPipe that converts a value into its JSON-format representation. Useful for debugging.

[HTML]
{{signUpForm.get('firstName').errors | json}}

Next, you will need to create a method, say getFormValidationErrors() to display errors to the console. You can trigger this method in a click of a button, such as:

<button type="button" (click)="getFormValidationErrors()">
  Test Form
</button>

This method will show the log of validation errors in your console

Display validation errors for Sign Up Form

Thanks.