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.
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-addng 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! :)