Reactive Forms And Validation In Angular With Typescript

This article will give you extensive information about Reactive Forms and Model-Driven Forms, and how to create the form using the Reactive Forms approach and implement the validation with Angular 6 and TypeScript.

In the previous article, "Template Driven Forms and Validation in Angular with Typescript", we have learned what Template-Driven Forms are, how to create these, and implement validations. If you don't know about Template-Driven Forms, I recommend you read the previous article as well. Now, let's move to Reactive Forms and understand what they are and how to create Reactive Forms in Angular and how to implement the validation with Reactive Forms or Model-Driven Forms.

Model-Driven Forms and Reactive Forms

As the name suggests, in this approach, to create forms, we focus on the component code more than the template code. It means to say that while creating the forms and validation, everything is written inside the component so that the logic will be inside the component class which makes the templates easy to understand. The Reactive Forms approach basically avoids the directives like ngModel and Required. Here, it doesn't focus on Template to make forms and validations but instead of that, we use the power of Angular. As we have available everything on the code, it means in the component class. So, it becomes very easy to test your forms without any complexity.

After the end of this demonstration, you will get the application like below, with implementation of Reactive Forms and Validations.

IMPLEMENTATION OF REACTIVE FORMS

So, let's understand the Reactive Forms in more detailed ways. For understanding it, first, we will create an Angular 6 project. If you don't have an idea of how to create an Angular project, just read the above articles. For this demonstration, we are using the same Angular CLI project which we have already created for our previous article of Template Driven Forms. So, let us open the project and go to app.module.ts file and add ReactiveFormsModule which is imported from @angular/forms. It will provide all the required components for the Reactive Forms.

After adding the ReactiveFormsModule in AppModule, it's time to add a new component class as 'ReactiveFormComponent' using the command 'ng g c TemplateDrivenForm'. We are working on the project which we have created in the previous article for Template Driven Forms. So, you will find both the components available in AppModule as below.

Now, we will create a route for a new component 'ReactiveFormComponent'. So, let us add one path inside the Routes.

Above, we have configured our AppModule and AppRoutingModule for a newly added component 'ReactiveFormComponent'. Now onwards, we will write the actual code for implementing the Reactive Forms. Before moving to the actual implementation, we should be aware of a few keywords, which will frequently be used in the coming code.

• FormBuilder
  It helps us to create extensive and complex forms using FormGroup, FormControl, FormArrary etc in an easy way.
  
  
• FormGroup
  It creates the group of form's elements using the list of controls and tracks the values for these controls.
  
  
• FormControl
  It is a class for creating and tracking the values and validations for individual control.
  
  
• FormControlName
  It is a directive which is used to map the model's control name to the template.
  
  
• FormGroupName
  It's a nested FormGroup. If you are willing to create the form group inside the form group then you can use FormGroupName.
  
  
• Validators
  It is a function that validates the data for the form control or list of form controls and returns the error or null.

After understanding the above keywords and their uses, we will move next to a demonstration of Reactive Forms. So, let's import these inside the ReactiveFormsComponent.

FormControl is used to create a form of control from the component class and Validators is used to validate that control using different types of validations attributes. You can see with the following code, how we create a control as 'email' and add the four different types of validations like required validation, minlength validation, maxlength validation and pattern matching validation. So, this way, you can create the control for the form group and add the validation.

Now, let's move to actual code implementation inside the ReactiveFormComponent. So, first let's get the instance of FormBuilder using Constructor Dependency Injection and create a reference of FormGroup. After that, you can create multiple controls for the form group 'registrationForm' similar to how we have given a sample control creation technique above. For getting the form's controls value on submitting the form, we have created on method as 'onRegistrationFormSubmit()'. In this method, first, we will check if our form is valid or not. Once the form will be valid then we can get the value of the control. You can see with the below code how we have created ReactiveFormComponent.