Блог

В настоящее время я пытаюсь написать глобальный указатель даты. Для этого я создал компонент, соблюдающий данный пример из angular (https://material.angular.io/guide/creating-a-custom-form-field-control ). Я только хочу передать на аутсорсинг часть всего поля mat-form, так что это то, что я делал:

app.component.html:

   <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <my-date-picker formControlName="birthday"></my-date-picker>
  </mat-form-field>
  

my-date-picker.component.html:

 <input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
  (ngModelChange)="modelChanged($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
  

(Я думаю, что .ts не должен быть важен для моей проблемы)

Но теперь это выглядит так:

Это также произойдет, если я бы обернул это так в app.component.html:

   <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <div>
      <input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
      (ngModelChange)="modelChanged($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </div>
  </mat-form-field>
  

Потому что тогда он отображает matSuffix как часть мат-инфикса. Похоже, что matSuffix распознается неправильно.

Хотя это выглядело бы так без дополнительной оболочки (divs):

Ввод:

 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
  

в app.component.html это не вариант. Я попробовал это, и это просто приводит к другим ошибкам, которые хуже, чем ошибка css.

Итак, я обнаружил, что matSuffix работает только с прямыми потомками и не смог найти обходного пути для моего случая. Кажется, это открытая «проблема» до сих пор. На самом деле, это должно быть ожидаемое поведение, хотя многие люди, похоже, борются с этим.

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