I've implemented the Mat control date range input control in my project and I'm facing an issue regarding displaying an error message when the user forgets to enter either the start date or end date.
Below is the HTML code:
<mat-form-field>
<mat-date-range-input [rangePicker]="pickerDate" disabled="this.form.controls[isCurrentDateChange].value==='False'">
<input formControlName="startDate" matStartDate matInput placeholder="Start date"/>
<input formControlName="endDate" matEndDate matInput placeholder="End date" />
</mat-date-range-input>
<mat-error *ngIf="this.form.controls['endDate'].value=='null'">
Please enter date.</mat-error>
<mat-datepicker-toggle matsuffix [for]="pickerDate"></mat-datepicker-toggle>
<mat-date-range-picker #pickerDate><mat-date-range-picker>
</mat-form-field>
And here is the TypeScript code:
export class MyComponent implements OnInit{
form:FormGroup;
constructor()
{
this.form=new FormGroup({
startDate:new FormControl(null,[Validators.required]),
endDate:new FormControl(null,[Validators.required])
});
saveForm()
{
let editForm=this.form.value;
if(this.editForm.startDate==null)
{
this.editForm.controls['startDate'].markAsTouched();
return false;
}
else if(this.editForm.endDate==null)
{
this.editForm.controls['endDate'].markAsTouched();
return false;
}
else
{
return true;
}
}
}
I have attempted various methods to display the error on the UI when the Save button is clicked, but it does not seem to be working. If anyone has any suggestions on how to show the mat error on the UI, please let me know. I have tried using ngIf as true, but the error is still not showing. Any help would be appreciated.