Published on

Angular: How to display all form errors in the Browser Console!

Have you ever been in a situation where the form you’ve built using Angular is invalid for some reason but you cannot figure out why? If so, no worries, because in this post I will show you how to display all form errors in the Browser Console so that you are easily able to debug whatever faulty form field you’re running into

Unknown form error causing the submit button to be disabled. Annoying, right?

Figure 1: Unknown form error causing the submit button to be disabled. Annoying, right?

Prerequisites:

Before we start make sure you have an Angular project that contains a reactive form so that we can start implementation of this great feature! If not, please clone my starter project I have created on GitHub here and follow along.

Setup & Execution:

Let’s open up our form component(mine is called UpdateFormComponent) and navigate to it’s typescript file. In there we need to add the following method:

  findInvalidControls() {
    const invalid = [];
    const controls = this.updateUserForm.controls;
    for (const name in controls) {
        if (controls[name].invalid) {
            invalid.push(name);
        }
    }
    console.log(invalid);
    return invalid;
  }

Note: the this.updateUserForm.controls line references my FormGroup variable which is named updateUserForm, so you’ll need to change that name to whatever your FormGroup variable is called.

Next, we just need to add the findInvalidControls() method to our ngOnInit() lifecycle hook so that it looks for form errors right when the component is rendered. Let’s add the line in red to ngOnInit():

  ngOnInit(){
    this.loadUserData();
    this.setupForm()
    this.formReady = true;
    this.findInvalidControls();
  }

Now if we intentionally create an error in the form group updateUserForm(which uses selectedUser as it’s form model), such commenting out the age field’s value, like so:

  loadUserData(){
    this.selectedUser = new User()
    this.selectedUser._id = '1';
    this.selectedUser.username = 'testing1';
    this.selectedUser.emailAddress = 'testing1@gmail.com';
    this.selectedUser.fullName = 'Testing1 Testing1';
    // this.selectedUser.age = ';
  }

And then if we navigate to our form page in the browser and open up the Dev Tools Console Tab(by right clicking then selecting ‘Inspect’), we will see the form fields that contain any form errors, contained inside an array(in this case the age field’s value was not provided hence the appropriate error: "age"):

Now we can see exactly what the invalid form field is!

Figure 2: Now we can see exactly what the invalid form field is!

Using this simple method we are easily able to identify which form field or fields might be causing the form to have an invalid state. From there, it’s only a matter of taking the required steps to resolve the identified errors.

Conclusion

Well, that’s it for this tutorial! If you have any questions or concerns please feel free to post a comment for this article and I will get back to you ASAP.

I hope you found this article helpful. Thanks so much for reading my article! Feel free to follow me on Twitter and GitHub, connect with me on LinkedIn and subscribe to my YouTube channel.