Подтверждение выбора даты в мате без выбора - PullRequest
Новая
       19

Подтверждение выбора даты в мате без выбора

0 голосов
/ 18 марта 2020

Я работаю с Angular 7 приложением. В котором мы использовали angular материал для пользовательского дизайна. 

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

Соглашение работало нормально, когда поле ввода текста касалось, не выбирая дату из средства выбора. Но нам нужна проверка, когда пользователь выбирает средство выбора даты, но не выбирает какую-либо дату и щелкает снаружи, не выбирая никакой даты. Поэтому я хочу показать красную рамку в поле ввода текста для даты. I

Я хочу, чтобы событие закрытия закрывалось без выбора даты.

Как этого добиться?

1 Ответ

1 голос
/ 18 марта 2020

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>

component.ts 

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

Пример

...