首页 > 解决方案 > 模板驱动表单中的角度材料日期选择器验证问题

问题描述

我在 Angular 8 应用程序中以 n 模板驱动形式使用 mat-date 选择器。“必需”验证未按预期工作。我看到了一些使用反应式表单的解决方案,但找不到任何使用模板驱动表单的解决方案。这是我的代码:

<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>

标签: angularangular-material

解决方案


写在component.ts文件中

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

推荐阅读