How to Display Validation or Error Messages in Angular Forms

Introduction 

Angular is making it simpler to fabricate applications for the web. Angular consolidates reliance infusion and revelatory layouts, and it has coordinated accepted procedures to take care of advancement issues. 

Structures are perhaps the most widely recognized highlights in any application. Clients can utilize structures to sign in, book a flight, or request food. You can improve the general information quality by approving client contribution for exactness. 

This aide will cover how to show approval or mistake messages with Angular structures.

Also Read:- Top Reasons to choose Angular Today

Create a New Angular Project

Install Angular globally by using the following command.

npm install -g @angular/cli

Then type below command to create a new Angular project.

ng new ngValidation

Add a few files and install some dependencies. Navigate to the root app directory and type the following command to start the server.

cd my-app
ng serve --open

You'll create a form with a single input to get an understanding of Angular forms. First, you must include reactive forms in app.module.ts.

// app.module.ts

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

imports: [
    BrowserModule, ReactiveFormsModule
  ],

Also Read:- List of Procedural Programming Languages

Now, we can add the below code to display the form.

<div style="text-align:left">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <form [formGroup]="myForm" novalidate>
        <div class="form-group">
          <label class="center-block">Username:
            <input class="form-control" formControlName="username">
          </label>
        </div>
        <div *ngIf="myForm.controls['username'].invalid && (myForm.controls['username'].dirty || myForm.controls['username'].touched)" class="alert">
            <div *ngIf="myForm.controls['username'].errors.required">
            Please enter username
          </div>
        </div>
  </form>
<p>myForm value: {{ myForm.value | json }}</p>
<p>myForm status: {{ myForm.status | json }}</p>
</div>

You also need to update the app.component.ts file.

// app.component.ts

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 {
  title = 'My Angular Form Validation Example';
   myForm: FormGroup;
   constructor(private fb: FormBuilder) {
    this.createForm();
  }
   createForm() {
    this.myForm = this.fb.group({
       username: ['', Validators.required ]
    });
  }
}

Template Driven Forms 

You can make a format driven structure in Angular layout grammar utilizing the structure mandates. Construct layout driven structures by following these means: 

• Make another Angular segment with an underlying structure design. 
• Add information properties to tie for each structure control and add a property to each shape input control. 
• Show/shroud approval messages. 
• Handle structure submit utilizing ngSubmit. 
• Discretionary: Add highlight to handicap the submit button at first and empower solely after the structure is legitimate. 

Also Read:- Top 10 Companies Which Built their Apps with AngularJS and Node.js

Receptive Forms 

Receptive structures are utilized to make frames that contain a responsive style. A receptive way of writing computer programs is empowered by Angular responsive structures that supports nitty gritty administration of the information streaming between a non-UI information model (normally recovered from a worker) and a UI-arranged structure model that contains the states and upsides of the HTML controls on the screen. Receptive structures give the solace of using responsive examples, testing, and approval. 

How about we take a gander at a model.

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 {
  title = 'Angular Form Validation Tutorial';
   myForm: FormGroup;
   constructor(private fb: FormBuilder) {
    this.createForm();
  }
   createForm() {
    this.myForm = this.fb.group({
       username: ['', Validators.required ]
    });
  }
}

Here, you need to import a few modules from @angular/forms.

• FormGroup
• FormBuilder
• Validators and ReactiveFormsModule

// app.component.ts

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

Also Read:- How to get selected radio button value in AngularJS?

Use a FormBuilder to handle validations. Create a form with all the validation rules inside the constructor.

// app.component.ts

createForm() {
  this.myForm = this.fb.group({
       username: ['', Validators.required ]
  });
}

Assign the validation rules to the form object in this code.

<form [formGroup]="myForm" novalidate>
        <div class="form-group">
          <label class="center-block">Username:
            <input class="form-control" formControlName="username">
          </label>
        </div>
        <div *ngIf="myForm.controls['username'].invalid && (myForm.controls['username'].dirty || myForm.controls['username'].touched)" class="alert">
            <div *ngIf="myForm.controls['username'].errors.required">
            Please enter username
          </div>
        </div>
  </form>
<p>Form value: {{ myForm.value | json }}</p>
<p>Form status: {{ myForm.status | json }}</p>

Conclusion

You have now seen both layout driven structures and responsive structures. At the point when a client contacts any info field however doesn't enter a worth, a blunder message will be shown. Once more, when the client obscures the information field without entering a worth, a blunder message will be shown. Along these lines, we can show approval messages for the structure fields.

Also Read:- What you pick in 2020 : ReactJS vs AngularJS vs VueJS