Home » Angular 8 Forms

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.

Angular 8 Forms
Angular 8 Forms

  • Install the Bootstrap 4 using the following command.

Now, include the bootstrap 4 inside the angular.json file inside styles array.

Angular 8 Forms

  • 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.

Angular 8 Forms

  • 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.

Angular 8 Forms

Also, update the view app.component.html file.

Angular 8 Forms

Now, save your code and start the server.


Angular 8 Forms

Enter any email id and you will see the result in the value.

Angular 8 Forms

When you click on the “Update Email” button, it will update the email id as we saved in the template file.

Angular 8 Forms

Next TopicAngular vs React

You may also like