Create Angular Form Validation

Basically, Angular has 4 types of validation, if you need any other validation then you can create custom validation.

1) Validators.required:- this validation is used to required for field value.
2) Validators.minLength(lengthNumber):- this validation is used to define the minimum length of the field value.
3) Validators.maxLength(lengthNumber):- this validation is used to define the maximum length of the field value.
4) Validators.pattern(pattern):- this validation is used to define the pattern of the field value like define email validation etc.

Now, start to implement the validation in the form.

Step1:- firstly open the add-employee.component.ts file and import Validators in the @angular/forms.

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

Now, add the validation in the form field.

  ngOnInit(): void {
      
    this.addEmpForm = this.fb.group({
    
      empFirstName: ['',[Validators.required]],
      empLastName: ['',[Validators.required]],
      empDepart: ['',[Validators.required]]
 });
  }

Now complete business logic in the file.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder,Validators } from '@angular/forms';
@Component({
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.scss']
})
export class AddEmployeeComponent implements OnInit {

  addEmpForm: FormGroup;
  submitted:boolean=false;
  constructor(private fb: FormBuilder){}

  ngOnInit(): void {
      
    this.addEmpForm = this.fb.group({
    
      empFirstName: ['',[Validators.required]],
      empLastName: ['',[Validators.required]],
      empDepart: ['',[Validators.required]]
 });
  }

    // convenience getter for easy access to form fields
    get edata() { return this.addEmpForm.controls; }

  onEmpSubmit(){
    this.submitted=true;
    if (this.addEmpForm.invalid) {
      return;
  }
  console.log(this.addEmpForm.value);

  }

}

Step2:- Now, add the validation text in the add-employee.component.html

<div align="center" style="width:50%">
<h4>Create Employee</h4>

<form [formGroup]="addEmpForm" (ngSubmit)="onEmpSubmit()"  novalidate autocomplete="off">

    <div class="input-item">
     <input type="text" formControlName="empFirstName" placeholder="Employee First Name" class="input-bordered form-control" [ngClass]="{ 'is-invalid': submitted && edata.empFirstName.errors }">
     <div *ngIf="submitted && edata.empFirstName.errors" class="invalid-feedback">
        <div *ngIf="edata.empFirstName.errors.required">First Name is required</div>
      
    </div>
    </div>

    <div class="div-gap"></div>

    <div class="input-item">
        <input type="text" formControlName="empLastName" placeholder="Employee Last Name" class="input-bordered form-control" [ngClass]="{ 'is-invalid': submitted && edata.empLastName.errors }">
        <div *ngIf="submitted && edata.empLastName.errors" class="invalid-feedback">
            <div *ngIf="edata.empLastName.errors.required">Last Name is required</div>
        </div>
    </div>

    <div class="div-gap"></div>

    <div class="input-item">
        <input type="text" formControlName="empDepart" placeholder="Employee Department" class="input-bordered form-control" [ngClass]="{ 'is-invalid': submitted && edata.empDepart.errors }">
        <div *ngIf="submitted && edata.empDepart.errors" class="invalid-feedback">
            <div *ngIf="edata.empDepart.errors.required">Department is required</div>
        </div>
    </div>

    <div class="div-gap"></div>

    <div class="gaps"></div>
    <div class="d-flex justify-content-between align-items-center">
     <button type="submit"  name="emp_sub" class="sub-button">Create</button>
  </div>
</form>


</div>

Step 3:- When you click on the submit button without filling the value then show the validation message.