Introduction

 
In this article, we will see Reactive Forms of angular. In this article, we will discuss how we can implement reactive forms in angular, how we can get input data, how to set validations and how we can set data in the input field.

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in



In this article, 
  • Create angular project
  • Create a simple HTML form
  • Initialize Reactive Form
  • Get form data
  • Add validations
  • Set data in the form

Create Angular project

 
To create a new angular project run the following command in your command box. Here ReactiveForms is my project name. 
  1. Ng new ReactiveForms  

Create a simple HTML form

 
Create a form in your component file. Here I use bootstrap to design my input. I don’t know how to use bootstrap in angular please refer to this article.
 
In this form I used basic inputs like textbox, dropdown and radio button.





Initialize Reactive Form

 
For making the form a reactive form you have to follow the below steps.
 
Step 1
 
Import FormsModule and ReactiveFormsModule in your import array of app.module.ts file.





Step 2
 
Create FormGroup object in your component.ts file.
 
Step 3
 
Define FormBuilder object in your constructor.
 
Step 4
 
Now initialize the form group with your expected fields as shown in the below code in your ngOnInit method or in your Constructor.




Step 5
 
Now initialize form group to your form in component.html file and also add formControllName in input fields and initialize with your field name which you create in .ts file. You can initialize form group to form as shown the below image. While enter the value in the form control name add the same value as you define in your .ts file otherwise it gives an error.

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in







Get form data

 
You can easily get form data using the reactive form. You can get field value by the following the statement. 
  1. this.FormDemo.controls.name.value  
Here FormDemo is my FormGroup object and the name is my form field.
 
For making it simple or not write similar code repeatedly we can create a get method as shown below which return form.controls and after that, we can get field value from it.
 
In .ts File,







In html file, 





Output
 
Forms Value

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in


Console 

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in



Add Validations in Form

 
In angular, there are different types of validator like required, email, min length, max length, etc.
 
But here we only user required an email validator to simply understand how validation works in angular.
 
Step 1
 
Define validator in your FormGroup initialization as show below.




Step 2
 
Check your form is valid or not in your submit method. You can check your form is valid or invalid by checking FormDemo.invalid.
 
Here FormDemo is formed group object and invalid is property of form group which returns true of your form is invalid. Return your method from further execution if your form is invalid.
 
Here also we initialize isSubmitted variable as true which we declare on top of constructor. 




Step 3
 
Set error message as shown in the below image. Here we check the flag with isSubmitted because it does not check with this flag we will see an error message when your page is load and we don’t want that. We only want to show an error message when the user clicks in submit button.

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in

The next thing we check here is form field has an error if the form field does not have any error then it’s time west to execute further.
 
Next, we create two labels with two different conditions which are if an email has required error then show required error message or email has invalid email error than show invalid email message.




Output
 
Required Validation

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in



Email Validation 

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in




Set data in the form

 
Set value in form is also easy as to get value from the form.
 
Here we add a button in the HTML file on that button click we want to set data in the form.




Create method in component.ts file for set data in your form field as show in below.




Output 

Reactive Forms In Angular 11 - Yogesh kumar Hadiya - YogeshHadiya33 - YogeshHadiya.in






I hope you find this article helpful and get information from it. If you like this article kindly share it with your friends and family.