Я использую Angular material datepicker, у меня возникла проблема при вводе одной или нескольких цифр в поле ввода, а затем при выходе из фокуса или щелчке за пределами даты выбора даты автоматически.
Я не хочу так выбирать. Я хочу, чтобы пользователь вводил полную дату, если не просто переводил поле ввода в состояние ошибки.
Может ли кто-нибудь помочь решить эту проблему?
Как насчет использования поддельного ввода поля для ввода текста и скрытия поля datepicker / form под ним, чтобы средство выбора даты открывалось в нужном месте (оно откроет поле ниже, в котором есть [matDatepicker]).
Вы должны прослушивать событие размытия в поле ввода дисплея и очищать значение поля формы, если оно недопустимо. Основная проблема в том, что новая дата (число) является действительной датой. Средство выбора даты преобразует введенные вами данные в дату и выдаст их как новое значение поля. Пользовательская логика может выполняться в событии размытия, возможно, с помощью moment.js для Проверить если строка является значением даты.
В случае, если он недействителен, значение поля реальной формы должно быть установлено равным нулю.
Также значение поля отображения должно обновляться, когда дата выбирается с помощью datepicker или для отображения начальных значений.
<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>
Эта логика должна быть заключена в настраиваемый элемент управления формой или, по крайней мере, в специальный компонент, потому что он модульный и его размещение в нескольких местах вызовет множество ошибок.
