How To Make To-date and From-date Validation In Angular

In this session we are learn about how to validate To-date to From-date in angular.

Step : 1  In app.component.html file add below code :-

<section class="wrapper">
  <h2>From Data To Date Validation In Angular</h2>
  <div [formGroup]="Calender">
    <div class="form-group">
      <label>From</label><br>
      <input type="date" formControlName="from" name="from">
    </div>
    <br>
    <div class="form-group">
      <label>To</label><br>
      <input type="date" formControlName="to" name="to">
    </div>
  </div>
  <p *ngIf="Calender.touched && Calender.invalid" class="text-danger">Please add a valid from and to date</p>
</section>

Step : 2  In app.component.ts file add below code :-

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  Calender: FormGroup;

  constructor() {
    this.Calender = new FormGroup(
      {
        from: new FormControl(""),
        to: new FormControl("")
      },
      [Validators.required, this.dateRangeValidator]
    );
  }

  private dateRangeValidator: ValidatorFn = () => {
    let invalid = false;
    const from = this.Calender && this.Calender.get("from")?.value
    const to = this.Calender && this.Calender.get("to")?.value
    if (from && to) {
      invalid = new Date(from).valueOf() > new Date(to).valueOf();
    }
    return invalid ? { invalidRange: { from, to } } : null;
  };

}

Step : 3  run your angular application :-

npm start

Output :-