Angular 8 Forms
Angular forms are used to handle user's input. We can use Angular form in our application to enable users to log in, to update profile, to enter information, and to perform many other data-entry tasks.
In Angular 8, there are 2 approaches to handle user's input through forms:
Both approaches are used to collect user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
Reactive Forms vs. Template-driven Forms
Both Reactive forms and Template-driven forms manage and process data differently. Each offers different advantages.
Angular 8 Form Example
Let's understand the Angular 8 form by creating a form example. Here, we use Angular reactive form.
Follow the steps given below:
Now, include the bootstrap 4 inside the angular.json file inside styles array.
Use the reactive forms by importing ReactiveFormsModule from the @angular/forms package and add it to your app.module.ts file's imports array.
So use the following code inside the app.module.ts file.
The FormControl class is the fundamental building block when using the reactive forms. So if you want to register the single form control, you need to import the FormControl class into your component and create the new instance of a form control to save as the class property.
Now, modify the app.component.ts file.
Also, update the view app.component.html file.
Now, save your code and start the server.
Enter any email id and you will see the result in the value.
When you click on the "Update Email" button, it will update the email id as we saved in the template file.