datepicker validation in angular

Question

I need to set a datepicker validation for my form. There are three datepickers which are respective fields namely From date,to date,renewal date. Here the from date should always be lesser than to date and renewal date should always be within the from and to date. So validation here should be made in such a way that it shows a error messages after submit when from date is greater than to date or renewal date is not in between the from date and to date

Html code:

                     <td>
                        <mat-form-field >
                            <mat-label>From Date</mat-label>
                            <input matInput readonly [matDatepicker]="picker1" placeholder="From Date"
                                formControlName="from_date">
                            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                            <mat-datepicker #picker1></mat-datepicker>
                        </mat-form-field>
                    </td>
                    <td>
                         <mat-form-field >
                            <mat-label>To Date</mat-label>
                            <input matInput readonly [matDatepicker]="picker2" placeholder="To Date"
                                formControlName="to_date">
                            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                            <mat-datepicker #picker2></mat-datepicker>
                        </mat-form-field>
                    </td>
      

                 <td>
                        <mat-form-field >
                            <mat-label>Renewal Date</mat-label>
                            <input matInput readonly [matDatepicker]="picker3" placeholder="Renewal Date"
                                formControlName="renewal_date">
                            <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
                            <mat-datepicker #picker3></mat-datepicker>
                        </mat-form-field>
                    </td>

Component ts:

 ngOnInit(): void {
  this.dateForm = this.fb.group({
    from_date: [],
    to_date: [],
    renewal_date: [],
    name: ['', Validators.required],
   
    
  })


}

CreateForm(){
  if (this.dateForm.value.name.trim()===""){
    this.toastr.error('Add name Field','Empty value inserted' ,{timeOut: 1500});
  return false;
  }
let data = this.dateForm.value
  this.service.dateCreateForm(data)
  .subscribe(res => {
      this.notification.showSuccess(" Data Entered !...")
      this.onSubmit.emit();          
      return true
      })
}


}}

So validation here should be made in such a way that it shows a error messages after submit when from date is greater than to date or renewal date is not in between the from date and to date

Answer 1

Well, you can add a group-wide validator, that takes in the group, extracts the info it need, and then sets the whole form to a error state.

customValidator(gp: FormGroup) {
  return gp.get('control').value < gp.get('other-control') 
    ? {control2IsBigger: true} 
    : null 
}

Which you pass in the formGroup declaration

You can use validators for each individual formControl as well, and then navigate through the controls using the .parent() and .get('controlName') methods

customValidator(control: FormControl) {
 control.value < return control.parent().get('otherControl').value 
  ? { control2IsBigger: true } 
  : null
}