How to create reactive form in Angular 11

How to create reactive form in Angular 11 . If you are starting a developer journey or switching from other technologies to Angular , then this Article will help you a lot . Forms are one of the most important topic in developing any web applications . Forms will help to capture the user input . Angular forms might be confusing subject if you are a beginner in Angular . But Once you practice for couple of times , then it will be more comfortable . We have two different types of forms in angular as follows .

1. Template Driven Forms
2. Module Driven Forms or Reactive Forms

I have wrote an article on How to Create Template Driven Form In Angular 11. It is a detailed step by step tutorial on Template Driven Forms . In this article we will be discussing about Module Driven forms or reactive Forms . So lets start about How to create reactive form in Angular 11 .

Step1 ;

1. Create An Angular Application by using ng new app1
2. Add Forms Module and ReactiveForms Module in app.module.ts
3. Add Form Element to app.component.html
4. Import FormGroup & FormController in app.component.ts
5. Declare a variable and assign FormGroup Instance to It . example: userForm = new FormGroup({}).
6. Add Form Controls to Form Group. This are the properties we are going to bind with HTML Input fields.
7. Now , Lets see the steps we have to follow to connect FormGroup we have created in Ts file with HTML forms
8. We are going to use Attribute binding to connect for form with FormGroup Instance . ex: <form [formGroup]=”userForm”></form>
9. Lets start binding the properies we declared inside form group with Input fields with formControlName. Ex . <input type=”text” formControlName=”fname”/>
10. Once above mentioned steps are done , we need to add an Event handler to handle submit event Ex: <form (submit)=”handleSubmit()”></form>.
11. Now we need to Create handleSubmit() event in ts file which can help us to handle the Forms .

I am Attaching a detailed step by step video i have created . It might help . Still if you face any difficulties , you can comment here . i will help you .

We will discuss in detailed about the Forms Validation and Server communication in our upcoming articles . So , If you are interested then please subscribe to my YouTube channel .