Reactive forms validation in Angular

Angular is a framework which makes the web applications development easier. Recently I have been exploring the Angular to build a single page application(SPA). When doing so, I came across a need to build a form which takes the user details and contact the server back-end to save the details. In this post, I will share the form validation techniques that I have learned when building the reactive forms using Angular 4.

Also, we will see how to do the confirm password validation using the reactive angular forms. Before going into the details, let’s have a brief look into the different form-building techniques provided by Angular.

Template-driven forms

In template-driven approach, the forms can be built by writing templates in the Angular template syntax with the form-specific directives. FormsModule have to imported into the app. module.  Also, FormsModule need to be added to the list of imports defined in the @NgModule decorator. Below listing shows the sample app.module.ts.

Then in the HTML template for the component, declare the form element as shown below.


The attributes required, minlength, maxlength and pattern can be added to the <input> form control and and the form control will then be binded to data model properties in the component using directives like ngModel.

This template-driven approach is asynchronous and the Angular will create the form control objects under the hood.

Reactive forms

Angular reactive forms supports reactive programming style and we need to manage the data flow explicitly. In reactive forms, you need to create the form control objects in the component and bind them to the form control elements in the component template.

You can push data model values into the form controls and pull user changed values back. In this approach you will use the form control objects directly in the component and hence the value updates are synchronous. To use the reactive forms, you need to import ReactiveFormsModule in the  app.module.ts.

The revised app.module.ts will be as below.

Reactive forms validation

Let’s see a quick example of how to implement the validation in reactive forms. Access the sample code for this example  from the below link.

Download Example Application

Also, the links are provided at the end of this post for reference.

In this example, we have a form for creating a new user. The form will take UserId, Password and Confirm-Password.  Initialize the form-group as below.

If you notice the above snippet, the validation for required, minlength and pattern can be done using the Validators present in the @angular/forms.

Implementing custom validation

The custom validation functionality can be written separately in typescript file as  static method. In this case, the method isPasswordMisMatched will be called for validating the equality of password and confirm-password.

Displaying the validation errors in component’s template

The above snippet for custom validation returns a response with attribute mismatch. Based on the attribute value of mismatch, display the error message in the template.

Mock back-end for rescue

Using the mock back-end for Http requests will help to simulate the requests to server. This example application uses the mock back-end to simulate the requests to server when creating new user.

The mock back-end will return success message only when the UserId is testuser and Password is test@123.

API call from component

Trigger the API call from component on successful form submission. The below snippet shows the implementation of calling the API provided by mock back-end.

Create User Form

Here is the reactive form for creating new user in this example application.

Displaying success message on completion of Create User API call

Conclusion

In this post, we have discussed about the different form building techniques provided by Angular. The reactive form approach is very powerful and makes building the complex forms easier. Also, we have developed a sample application which makes use of reactive forms and performs  validation using custom validators.

Thank you for reading this post. What next? Start building your single page applications and make use of the reactive forms offered by Angular.


Downloads: angular-reactive-forms-example.zip


About Vignesh M

Java developer , AWS Certified Solutions Architect Associate and Cloud technology enthusiast. Currently working for Hexaware technologies. He believes that knowledge increases by sharing not by saving.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.