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:
- Reactive forms
- Template-driven 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.
Reactive Forms
- Reactive forms are more robust.
- Reactive forms are more scalable, reusable, and testable.
- They are most preferred to use if forms are a key part of your application, or your application is already built using reactive patterns. In both cases, reactive forms are best to use.
Template-driven Forms
- Template-driven forms are best if you want to add a simple form to your application. For example: email list signup form.
- Template-driven forms are easy to use in the application but they are not as scalable as Reactive forms.
- Template-driven forms are mainly used if your application’s requires a very basic form and logic. It can easily be managed in a template.
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:
- Create an Angular form app named angular8from and run the server by using the following commands.
- Install the Bootstrap 4 using the following command.
Now, include the bootstrap 4 inside the angular.json file inside styles array.
- Register the Reactive Forms Module
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.
- Add FormControl class register the control into the template and update the FormControl value
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.
Output:
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.
