I am looking for a way to not allow null inputs for both the start and end dates in a mat date range picker. I am using mat-date-range-picker-actions so the dates are not applied until the user clicks the apply button. If one of the date selections is blank I would like to display the mat-error and not apply the dates.
What is the best way to do this? What property accesses the date selections of the range picker before the apply button has been pressed?
<mat-form-field
appearance="outline"
floatLabel="auto"
subscriptSizing="dynamic">
<mat-label>Enter a range</mat-label>
<mat-date-range-input [rangePicker]="picker">
<input
matStartDate
placeholder="Start"
id="appointmentDateStart"
(dateChange)="applyFilter($event)"
[value]="currentFilter.appointmentDateStart" />
<mat-error *ngIf="startBlank"
>Start date must not be empty</mat-error
>
<input
matEndDate
placeholder="End"
id="appointmentDateEnd"
[value]="currentFilter.appointmentDateEnd"
(dateChange)="applyFilter($event)" />
<mat-error *ngIf="endBlank"
>End date must not be empty</mat-error
>
</mat-date-range-input>
<mat-datepicker-toggle
matIconSuffix
[for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker disabled="false">
<mat-date-range-picker-actions>
<button mat-button matDateRangePickerCancel>
Cancel
</button>
<button
mat-raised-button
color="primary"
matDateRangePickerApply>
Apply
</button>
</mat-date-range-picker-actions></mat-date-range-picker
>
</mat-form-field>
