时间戳

首页 > 解决方案 > 无选择的 Mat Datepicker 验证

angular - 无选择的 Mat Datepicker 验证

问题描述

我正在使用 Angular 7 应用程序。其中我们使用了棱角材料进行用户设计。

    <mat-form-field appearance="outline">
        <mat-label>My Date</mat-label>
        <input name="myDate" placeholder="My Date" matInput [matDatepicker]="picker" required [(ngModel)]="modalPresentation.myDate" (focus)="picker.open()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
        <mat-error *ngIf="validationUtil.hasError(form.controls.myDate, 'required')">This field is required.</mat-error>  
    </mat-form-field>

当输入文本字段在未从选择器中选择日期的情况下触摸时，该协议可以正常工作。但是我们希望在用户打开日期选择器但未选择任何日期并在未选择任何日期的情况下单击外部时进行验证。所以我想在 date.i 的输入文本字段上显示红色边框

当日期选择器在没有任何日期选择的情况下关闭时，我想要关闭事件。

我怎样才能实现它？

标签： angulardatepickerangular-material

解决方案

mat-datepicker 已关闭事件发射器，它将在 datepicker 关闭时发出事件。使用它来手动触发 mat-datepicker 表单控件验证。

尝试这个：

组件.html

<mat-form-field appearance="outline">
        <mat-label>My Date</mat-label>
        <input  name="myDate" placeholder="My Date" #ref="ngModel" matInput [matDatepicker]="picker" [required]="true" [(ngModel)]="modalPresentation" (focus)="picker.open()">
        <mat-datepicker-toggle  matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker (closed)="onClosed(ref)" #picker></mat-datepicker>
        <mat-error *ngIf="ref.touched && ref.invalid">This field is required.</mat-error>   
 </mat-form-field>

组件.ts

onClosed(formControl){
    formControl.control.markAsTouched();
  }

例子

推荐阅读