Angular Reactive Forms: Display error messages onSubmit

source: unsplash.com

The form validations play a significant role in web applications that have heavy forms. With validations, we achieve two things:

• Establish communication with the end-user
• Data integrity on the server. 

We know that complex business cases require different handling. Some application forms need to update the form model on the submit event, and some others require to display the error messages when the submit button is clicked.
​In this article, we will see both.

updateOn: Submit

On every keystroke, the HTML elements emit an input event; this triggers the form validators' execution and updates the FormModel. We can say in a nutshell that on every keystroke, the value and the validity are re-calculated.

There is a property in the AbstractControl classes (FormControl, FormGroup, FormArray) allowing us to change the default behavior. The options are:

• update on: change (this is the default)
• update on: submit
• update on: blur

The code below shows a FormGroup with two FormControl instances, which uses the updateOn: 'submit'. 

component.ts

In line 21, we see how to use the updateOn option, and in the video below, we see the result.

Display the error messages on submit

The previous section's code block has two FormControl instances, and each one has a required validator. We often have to find a way to display the error messages to the user only when the submit button is fired. Lucky us! In Angular Reactive Forms, this comes for free and is very easy to use. 

Let's see some code parts of the [formGroup] directive.

full code: https://github.com/angular/angular/blob/master/packages/forms/src/directives/reactive_directives/form_group_directive.ts

What we see in line 53, is a listener for the (submit) event, which is handled by the method "onSubmit".
It is also useful to note that we can use the [formGroup] public properties on our templates, which are available to us because of the exportAs in line 54.

How about the onSubmit event handler code? Let's have a look at it.

full code: https://github.com/angular/angular/blob/master/packages/forms/src/directives/reactive_directives/form_group_directive.ts

In line 242, we see that the submitted property is assigned with the value true. And guess what! This property is public; hence, we can use it in our template! 🎉

We are one step away from seeing how to use the submitted property. 

​component.html

In line 2, we declare a template reference variable, and we assign it with the ngForm, which is the name formGroup uses to export itself.

We can now use set the class "is-invalid" only if the form is submitted and the corresponding control is invalid. We do this in lines 12 and 28.

And that's it! Let's see what the result of this code is.

Thanks for reading this article ​🙏