Reactive Forms in Angular

We will approach this while making a simple To-Do App along with angular material.

In Angular, reactive forms are considered to be more responsive as it handles inputs which change over time.

A to-do app is the one where we can add and delete about the list of items to be done.

To Do App

We will do this through reactive module of angular in a step-by-step guide.

#1. Create a new angular project through the following command:

ng new todoapp

#2.Install bootstrap along with other dependencies

npm install bootstrap jquery popper.js

#3. Add themes in the styles and scripts of angular.json file.

#4. Import MatListModule,MatCardModule and MatFormFieldModule from ‘@angular/material/list’, ‘@angular/material/card’ and ‘@angular/material/form’ respectively. Along with this put this in the imports array.

#5. Create two components task-add and task-list through the following commands:

ng g c task-add
ng g c task-list

#6.Within the app.component.html file add the following code:

#7. Import FormBuilder,FormGroup and Validators in task.add.component.ts file.

#8. Parameterize the constructor with a FormBuilder type parameter and put the FormGroup code into it.

#9. In the task-add.component.html, do the data-binding and event-binding.

#10. Import ReactiveFormsModule in the imports array of the app.module.ts file.

#11. In order to create the form, we build a class with form variables, so that we could use this as a model.

a. Create a model folder inside app folder.

b. Create task.ts file in the folder.

c. Export the class.

d. Import this class in app.component.ts file.

#12. Make an array of type Task in the app.component.ts file.

#13. Create an output decorator with an event emitter in the task-add.component.ts file. This lets child component to send data to the parent component.

@Output() addeventEmitter = new EventEmitter();

#14. Create the onkeyPress($event) function.

#15. Do the event binding in the app-task-add component in app.component.html file.

<app-task-add (addEventEmitter) = “addEventEmitter($event)”></app-task-add>

#16. Transfer this tasks array to the task-list.component.ts file using @Input decorator. This lets parent component to send data to the child component.

This creates a reactive form in Angular.

You can see the entire project on the link : https://github.com/ArunimaGupta1/ToDoApp

I hope this helps. Please share if you have review or suggestions for this one! :)