Я пытаюсь создать пользовательский элемент управления полем даты, следуя инструкции, предоставленной материалом angular. https://material.angular.io/guide/creating-a-custom-form-field-control
DatePicker имеет вход, который принимает только цифры, добавляет косую черту и выводит пользовательское отформатированное значение.
Пока что логика c работает , но перенос элемента управления вокруг mat-form-field
не ведет себя должным образом, matSuffix
не соблюдается и форматирование элементов внутри поля формы не затрагивается.
Я делаю что-то не так или мне следует сам отформатировать элементы с помощью css?
Вот мой шаблон контроля даты:
<div>
<input #date
matInput
[placeholder]="placeholder"
[disabled]="disabled"
[(ngModel)]="_inputValue"
(keyup)="keyUp($event)"
class="customDate"
maxlength="10">
<input hidden
[matDatepicker]="DatePicker"
[(ngModel)]="_pickerValue"
(dateChange)="pickerEvent($event)">
<mat-datepicker-toggle matSuffix [for]="DatePicker" class="dateToggle"></mat-datepicker-toggle>
<mat-datepicker #DatePicker></mat-datepicker>
</div>
и вот как я вызываю элемент управления в поле формы:
<mat-form-field appearance="legacy" >
<date-control [formControl]="customDate"
placeholder="DD/MM/YYYY"
[dateType]="dateType"
[defaultDate]="defaultDate"
required>
</date-control>
<mat-error *ngIf="customDate.hasError('minlength') && customDate.touched">Date is not correct!</mat-error>
<mat-error *ngIf="customDate.hasError('required') && customDate.touched">Required</mat-error>
</mat-form-field>
Вы можете увидеть полный код в этом блице: https://stackblitz.com/edit/my-custom-datepicker
Это моя первая попытка создать пользовательский элемент управления полем формы, поэтому, если у кого-то есть какие-либо предложения или исправления, пожалуйста, Посоветуйте ... Спасибо!