Mat date start date end date validation angular 8

Question

I am working on Mat date picker where I have start date and end date where I have one validation that is end date should not be lesser than start date for example

if start date was 12-JAN-2020 end date can be 12-JAN-2020 or greater than this but it can not be 11-JAN-2020.

Currently I was trying with Min MAX but this is not working as expected

I was trying in google & SO not getting correctly

   <mat-form-field>
      <input matInput [matDatepicker]="fromDate" placeholder="Choose a date"
          [value]="getData(item2.firstPatientInDate)" [max]="today<item2.lastPatientInDate|| item2.lastPatientInDate == undefined?today:item2.lastPatientInDate" [(ngModel)]="item2.firstPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>

        <mat-form-field>
           <input matInput [matDatepicker]="pickerend" [max]="today" [min]="item2.firstPatientInDate"   placeholder="Choose a date"
                        [value]="getData(item2.lastPatientInDate)" [(ngModel)]="item2.lastPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>

                </mat-form-field>

Answer 1

Use this way with reactive forms with custom validation

constructor(private formBuilder: FormBuilder) { 
   this.yourForm = this.formBuilder.group({
   startDate: [''],
   endDate: ['']
   }, {validator: this.checkDates});  
}

checkDates(group: FormGroup) {
   if(group.controls.endDate.value < group.controls.startDate.value) {
   return { notValid:true }
   }
   return null;
}

In your Front End

<small *ngIf="yourForm.hasError('notValid')">Not valid</small>