Пользовательский элемент управления формы выбора даты неправильно отображается внутри поля mat-form-field - PullRequest
0 голосов
/ 02 февраля 2020

Я пытаюсь создать пользовательский элемент управления полем даты, следуя инструкции, предоставленной материалом 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

Это моя первая попытка создать пользовательский элемент управления полем формы, поэтому, если у кого-то есть какие-либо предложения или исправления, пожалуйста, Посоветуйте ... Спасибо!

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