How to create reactive form in Angular 9 . 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 .
- Template Driven Forms
- Module Driven Forms or Reactive Forms
I have wrote an article on How to Create Template Driven Form In Angular 9. 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 9 .
Step1 ;
- Create An Angular Application by using ng new app1
- Add Forms Module and ReactiveForms Module in app.module.ts
- Add Form Element to app.component.html
- Import FormGroup & FormController in app.component.ts
- Declare a variable and assign FormGroup Instance to It . example: userForm = new FormGroup({}).
- Add Form Controls to Form Group. This are the properties we are going to bind with HTML Input fields.
- Now , Lets see the steps we have to follow to connect FormGroup we have created in Ts file with HTML forms
- We are going to use Attribute binding to connect for form with FormGroup Instance . ex: <form [formGroup]=”userForm”></form>
- Lets start binding the properies we declared inside form group with Input fields with formControlName. Ex . <input type=”text” formControlName=”fname”/>
- Once above mentioned steps are done , we need to add an Event handler to handle submit event Ex: <form (submit)=”handleSubmit()”></form>.
- 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 .