Дата выбора материала углового материала автоматически в фокусе отпуск

Question

Я использую инструмент выбора даты Angular, у меня возникла проблема при вводе одной или нескольких цифр в поле ввода, а затем при удалении фокуса или щелчке снаружи указатель даты выбирается автоматически.

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

Может кто-нибудь помочь решить эту проблему?

stackblitz link

Answer 1

Как насчет использования ложного поля ввода для ввода текста и скрытия поля выбора даты / формы под ним, чтобы средство выбора даты открывалось в нужном месте (откроется поле ниже, содержащее [matDatepicker]).

Вы должны прослушатьдля события размытия в поле ввода дисплея и очистки значения поля формы, если оно недопустимо.Основная проблема заключается в том, что новая Дата (число) является действительной датой.Средство выбора даты преобразует введенные вами данные в дату и отправит их как новое значение поля.Пользовательская логика может быть выполнена для события размытия, вероятно, с помощью moment.js, равной . Проверьте, является ли строка значением даты .

. В случае ее недопустимости значение поля реальной формы должно быть установлено наnull.

Кроме того, значение поля дисплея должно обновляться при выборе даты через указатель даты или для отображения начальных значений.

<mat-form-field [formGroup]="dateFormGroup">
  <input matInput (blur)="onBlurEvent($event)" placeholder="Choose a date">
  <input type="hidden" formControlName="date" [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Эта логика должна быть заключена в пользовательский элемент управления формы или, по крайней мере, ввыделенный компонент, потому что он модульный, и наличие его в нескольких местах вызовет много ошибок.