Create Forms with Validation in Angular 8

 

Forms are important part of any web application. The Form contains different types of elements to like text fields, check boxes, radio buttons, submit buttons, and more to collect user input.

In our previous tutorial you have learned how to create forms with validation in Angular 7. In this tutorial you will learn how to create form with validation in Angular 8. We will use ReactiveFormsModule module to build Reactive Forms and add validations.

AS there are two types of forms offered in (Template Driven Form Reactive Forms) in Angular 8. In this tutorial we will learn to create reactive forms and add validations.

 

Step1: Upgrade to Angular 8 Version

As right now, most probably we are using Angular 7 version. So we will need to upgrade the version of Angular CLI 7 to Angular CLI 8. So first we will check Angular CLI version using following command.

ng --version

if the Angular CLI version is lower than Angular CLI 8 then we will uninstall Angular CLI to reinstall the latest Angular CLI using following command.

npm uninstall -g angular-cli

Then we need to clear the cache using the following command.

npm cache clean

Now finally we will run the following command to install the latest Angular CLI.

npm install -g @angular/cli@latest

Now you have installed the Angular 8 CLI.

Step2: Create Project in Angular 8

After upgrading Angular 8 CLI, we will create our new new Angular 8 project to create forms with validations. We will create project angular_8_project using following command. We will go the current project and run it.

ng new angular_8_project
cd angular_8_project
ng serve

Step3: Install Bootstrap 4 CSS Framework

As we will create FORM HTML suing Bootstrap framework, so we will install bootstrap module using following 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"
],

Step4: Set-up ReactiveFormsModule in Angular 8

As we will create forums using ReactiveFormsModule module, so we will setup this in our Angular application. We will make changes in app.module.ts file to import the module. We will also import BrowserModule module.

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

imports: [
    BrowserModule, ReactiveFormsModule
],

Step5: Create Reactive Form with Validations in Angular 8

We will create FORM HTML with Bootstrap framework. We’ll create a FORM in Angular 8 using FormGroup and FormBuilder Reactive FORM Module. We will add following FORM HTML to app.component.html to FORM with validations.

<div class="container">
  <h2>Angular 8 Reactive Form with Validation</h2>
  <form [formGroup]="myForm" (ngSubmit)="submitForm()" novalidate>
      <div class="form-group">
        <label class="center-block">Enter Name:
          <input class="form-control" formControlName="name">
        </label>
      </div>
      <div *ngIf="myForm.controls['name'].invalid && (myForm.controls['name'].dirty || myForm.controls['name'].touched)" class="alert alert-danger">
          <div *ngIf="myForm.controls['name'].errors.required">
          Name is required.
        </div>
      </div>
	  <div class="form-group">
        <button type="submit"
        [disabled]="myForm.pristine || myForm.invalid" class="btn btn-success">
        Save
      </button>
      </div>
</form>
</div>

Above the form element uses the [formGroup] directive to bind to the myForm FormGroup in the app component.

Step6: Handle Reactive Forms Submission and Validations

Now will handle Reactive Forms submission and validations. We will use FormGroup, FormBuilder, Validators modules to handle form and validations. We will add the following code to app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;
   constructor(private formbuild: FormBuilder) {
    this.reactiveForm();
  }
  
  reactiveForm() {
    this.myForm = this.formbuild.group({
       name: ['', Validators.required ]
    });
  }
  
  submitForm() {
    console.log(this.myForm.value)
  }
}

Save the code and go to the browser and load page to see the form with validation.