Validate dates using Angular material datepicker

Question

In angular material dialog popup i want compare the two dates and if From date is less then To Date i will display the error using

I tried something below

<div class="col">
        <mat-form-field>
          <mat-label>Last updated Date From</mat-label>
          <input matInput [matDatepicker]="updateFromPicker" formControlName="fromUpdatedDateTime">
          <mat-datepicker-toggle matSuffix [for]="updateFromPicker"></mat-datepicker-toggle>
          <mat-datepicker #updateFromPicker></mat-datepicker>
        </mat-form-field>
      </div>
      <div class="col">
        <mat-form-field>
          <mat-label>Last updated Date To</mat-label>
          <input matInput [matDatepicker]="updateToPicker" formControlName="toUpdatedDateTime" >
          <mat-datepicker-toggle matSuffix [for]="updateToPicker"></mat-datepicker-toggle>
          <mat-datepicker #updateToPicker></mat-datepicker>
        </mat-form-field>
        <mat-error *ngIf="filterForm.controls['toUpdatedDateTime'].hasError('incorrect')">To date can not be less than From date</mat-error>
    </div>

and in My component file

private intiform() {
    this.filterForm = this.formBuilder.group({
      selectOnMemberBehalf: [this.transactionFilter.selectOnMemberBehalf],
      memberCode: [this.transactionFilter.memberCode],
      isPayer: [this.transactionFilter.isPayer],
      isPayee: [this.transactionFilter.isPayee],
      rtgsReference: [this.transactionFilter.rtgsReference],
      counterPartyCode: [this.transactionFilter.counterPartyCode],
      transactionStatus: [this.transactionFilter.transactionStatus],
      valueDate: [this.transactionFilter.valueDate],
      transactionType: [this.transactionFilter.transactionType],
      queueStatus: [this.transactionFilter.queueStatus],
      fromReceivedDateTime: [this.transactionFilter.fromReceivedDateTime],
      toReceivedDateTime: [this.transactionFilter.toReceivedDateTime],

***fromUpdatedDateTime: [this.transactionFilter.fromUpdatedDateTime],
          toUpdatedDateTime: [this.transactionFilter.toUpdatedDateTime,[Validators.required,this.validateToDate]],***

      payerReference: [this.transactionFilter.payerReference],
      amountFrom: [this.transactionFilter.amountFrom],
      amountTo: [this.transactionFilter.amountTo]
    });
  }

  validateToDate() {
//How to read form controls here?
//this.filterForm.controls['fromUpdatedDateTime'].setErrors({'incorrect': true});

}

how to access the form controls inside the validateFunction i am getting error

Cannot read property 'filterForm' of undefined

Answer 1

I have archived by using like this, please follow. It will surely work for you. This is working code.

sample.html

<div class="row" [formGroup]="filterForm">
<div class="col">
    <mat-form-field>
        <mat-label>Last updated Date From</mat-label>
        <input matInput [matDatepicker]="updateFromPicker" formControlName="fromUpdatedDateTime">
        <mat-datepicker-toggle matSuffix [for]="updateFromPicker"></mat-datepicker-toggle>
        <mat-datepicker #updateFromPicker></mat-datepicker>
    </mat-form-field>
</div>
<div class="col">
    <mat-form-field>
        <mat-label>Last updated Date To</mat-label>
        <input matInput [matDatepicker]="updateToPicker" formControlName="toUpdatedDateTime" >
        <mat-datepicker-toggle matSuffix [for]="updateToPicker"></mat-datepicker-toggle>
        <mat-datepicker #updateToPicker></mat-datepicker>
    </mat-form-field>
    <mat-error *ngIf="filterForm.errors?.range && filterForm.touched">To date can not be less than From date</mat-error>
</div>

sample.ts

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

const MyAwesomeRangeValidator: ValidatorFn = (fg: FormGroup) => {
  const start = fg.get('fromUpdatedDateTime').value;
  const end = fg.get('toUpdatedDateTime').value;
  return start !== null && end !== null && start < end ? null : { range: true };
};

@Component({
...

export class SampleComponent{

filterForm: FormGroup;

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

 intiForm() {
    this.filterForm = this.fb.group({
        fromUpdatedDateTime: ['', Validators.required],
        toUpdatedDateTime: ['', Validators.required],
    }, {validator: MyAwesomeRangeValidator});
  }
}

Answer 2

Within the function validateToDate you would get injected parameter of the type AbstractControl. Use that to access the form field and its value.

validateToDate(control: AbstractControl){
   console.log(control); //do this to check the attributes
}

If you apply custom validator on a group then you will get all the form controls defined under that group in your validator.