Angular material date picker validation issue in template driven form

1
votes

I am using mat-date picker in n template driven form in my Angular 8 application. The "required" validation is not working as expected. I see a few solutions with Reactive forms but cannot find anything with Template driven forms. Here is my code:

<form name="actionPoint" role="form" (ngSubmit)="actionPoint.form.valid && confirmModal()"
                            #actionPoint="ngForm" novalidate autocomplete="off">

<mat-form-field>
<input color="primary" matInput [matDatepicker]="picker"
    id="field_effectiveDate" [max]="maxDate" name="closedDate"
    [(ngModel)]="actionPointClosedOnDate" #closedDate="ngModel" disabled
    (dateChange)="onActionPointClosedOnDateChange($event)" required
    closedDate>
<div *ngIf="actionPoint.submitted" class="invalid-feedback">
    <div
        *ngIf="actionPoint.controls['closedDate']?.hasError('required')">
        Date is required</div>
</div>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [disabled]="false">
</mat-datepicker>
1
angularangular-material

1 Answers

0
votes

write it in component.ts file

if(this.actionPointClosedOnDate.trim() == "")
{
    alert("Enter Date");
    return;
}