Angular 6 Forms Tutorial and Example

In this tutorial part of the Angular 6 series we'll learn to use forms by creating a simple example using the model driven approach.

Forms are used in most web applications as they allow users to submit input when interacting with the application. Among countless use cases, they are useful for logging in users, searching for information and submitting feedback.

Angular provides two approaches, template-driven forms and model-driven or reactive forms, for working with forms:

  • The template driven approach makes use of built-in directives to build forms such as ngModel, ngModelGroup, and ngForm available from the FormsModule module.

  • The model driven approach of creating forms in Angular 6 makes use of FormControl, FormGroup and FormBuilder available from the ReactiveFormsModule module.

This tutorial assumes you already have an Angular project setup. If you don't, make sure you follow the getting started tutorial which shows you how to create Angular project using the Angular CLI.

Creating a New Angular 6 Project

You need to create an Angular 6 project using Angular CLI 6:

ng new angular6forms

Angular Reactive/Model Driven Forms

In this tutorial we'll create an example HTML form. We then create a form model in the application component using the FormGroup and FormControl classes.

Finally, we'll use the formGroup, formControlName and formGroupName directives to bind our form model to our HTML form.

Importing the ReactiveFormsModule Module

Open the src/app/app.module.ts file and import the ReactiveFormsModule module.

import { ReactiveFormsModule } from '@angular/forms';

imports: [
  ...   
  ReactiveFormsModule
],

Next, let's import the FormControl and FormGroup classes in the src/app/app.component.ts file.

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  exampleForm = new FormGroup ({
    firstName: new FormControl(),
    lastName: new FormControl(),

  });
}

We create a exampleForm instance of FormGroup with two form controls firstName and lastName.

Next, we can need to create a form in the src/app/app.component.html file:

<h1>Angular 6 Forms Example</h1>
<form [formGroup]="exampleForm">
  <div class="form-group">
    <label>First Name:</label>
      <input class="form-control" formControlName="firstName">
    <label>Last Name:</label>
          <input class="form-control" formControlName="lastName">
  </div>
</form>

We use the formGroup property in the <form> tag to bind the form with our exampleForm form group and we use the formControlName property to bind the <input> tag to individual form controls.

Using the FormBuilder Module

The FormBuilder class helps you create controls.

Inside the src/app/ap.component.ts file import the FormBuilder class from the @angular/forms package:

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

Next inject FormBuilder in the component constructor as formBuilder ```ts @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; exampleForm = new FormGroup ({ firstName: new FormControl(), lastName: new FormControl(),

}); constructor(private formBuilder: FormBuilder) { } ... ```

Next add a createForm() method with the following code:

createForm() {
    this.exampleForm = this.formBuilder.group({
      firstName: '',
      lastName: ''
    });
}

Finally call the method from the constructor:

  constructor(private formBuilder: FormBuilder) { 
      this.createForm();
  }

Conclusion

In this tutorial, we've seen a simple example of creating a form model and bind it to the HTML <form> element.


comments powered by Disqus