How to Create Forms in Angular 7

Forms are commonly used in web applications to take users data like user registration, login or take other details to store into database. Angular 7 provides advance approach to create Forms in different ways like template driven forms and reactive forms.

The Reactive forms uses the model-driven approach to handle the form inputs and data. it uses the specific approach to manage the state of the form according to provided form data. The Reactive forms enables to test forms state to make sure that the form data is reliable and consistent.

In our previous Angular 7 tutorial, you have learned how to implement Angular 7 Form Validation. In this tutorial you will learn how to Create Angular 7 Forms with example.

Also, read:

Now we will cover this tutorial step by step to create Angular 7 Reactive Forms.

Step1: Create Angular 7 Project

First we will install the Angular 7 and create the new Angular project. We will create ng7form project.

ng new ng7form

Now, go inside the ng7form folder and open the project folder.

cd ng7form

Step2: Install Bootstrap 4 CSS Framework

We will install the Bootstrap 4 CSS Framework to create Form HTML using the below command.

npm install bootstrap --save

After Bootstrap install, we will include the bootstrap 4 inside the angular.json file inside styles array.

"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
],

Step3: Import Reactive Forms Module

We will import the ReactiveFormsModule from the @angular/forms package and add to app.module.ts file import array of create angular project. We will add the module inside app.module.ts file using below code.

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

@NgModule({
  imports: [   
    ReactiveFormsModule
  ],
})

Step4: Import Form Control

We will import the FormControl class inside app.component.ts file to implement reactive forms. We create the new instance of a form control to save as the class property to handle forms. We will add below code inside app.component.ts for this.

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

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

Here we will use the constructor FormControl to set its initial value for empName. With component class, we will have access to the form input state like listen, update, and validate to handle it.

Step5: Associate Form Control with Template

As we w=have already created control in the component class. So it must be associated with the form control in a template. So here we will update the template with form control using the formControl binding through FormControlDirective included in the ReactiveFormsModule.

<div class="container">
  <label>
    Employee Name:
    <input type="text" [formControl]="empName">
  </label>
</div>

With the formControl binding, the form control is associate with empName input element in a template.

Step6: Control Form Value

Now here we will get the form input values from empName input.

<div class="container">
  <label>
    Employee Name:
    <input type="text" [formControl]="empName">
  </label>
  Value: {{ empName.value }} 
</div>

Step7: Update Form Control Value

Now will change the control’s value programmatically using Reactive Forms methods. We will use the form control setValue() method to update the value of the form control. We will write the below code inside app.component.ts file to update the value.

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

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

  updateEmpName() {
    this.empName.setValue('Ryan Smith');
  }
}

Now we will save following template code inside the view app.component.html file to handle the functionality to display current typed value. When we will click Update button, it will change the input box value and display it.

<div class="container">
  <div class="form-group">
    <label>
      Employee Name:
    </label>
    <input type="text" [formControl]="empName" />
  </div>
  <div class="form-group">
    <button (click)="updateEmpName()" class="btn btn-dark">Update Employee Name</button>
  </div>
  <p>
    Value: {{ empName.value }}
  </p>
</div>

So here we have covered form creation and handle its functionality with Angular 7 Reactive Forms.

You may also like: