Расширьте MatChip из Angular материала. Почему вход и заполнитель больше не работают? - PullRequest
0 голосов
/ 10 марта 2020

Я расширяю компонент MatChip из Angular материала (все в версии 9). Мы хотим, чтобы внешний вид и поведение отличались от стандартного.

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

Оболочки затем помещаются в стандартный mat-chip-list .

Все отображается правильно. Только заполнитель ввода не работает. Он помещается в начале ввода, например, когда вход пуст.

Это код пользовательского чипа, который расширяет базовый:

export class ChipComponent extends MatChip implements OnChanges {
   my custom code here
}

html это простой div с пользовательской формой и элементом, спроецированным внутри с ng-content .

Затем есть специальный компонент-обертка:

<form [form-group]="myFormGroup">
  <custom-chip disableRipple="true">

    <div> some projected content here </div>

  </custom-chip>
</form>

И затем это код, в котором я использую обертку в mat-chip-list .

<mat-form-field class="example-chip-list" style="width: 100%">
<mat-chip-list #chipList aria-label="Fruit selection">
  <my-custom-chip-wrapper
    *ngFor="let selected of selectedFruits; let index = index"
    [fruit]="selected"
  >
  </my-custom-chip-wrapper>
  <input
    #fruitInput
    [formControl]="fruitFormControl"
    [matAutocomplete]="auto"
    [matChipInputFor]="chipList"
    placeholder="My custom chip 1"
    >
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedFruit($event)">
  <mat-option *ngFor="let f of fruits | async" [value]="f">
    {{f}}
  </mat-option>
</mat-autocomplete>
</mat-form-field>

Из моего исследования кажется, что класс mat-form-field-should-float не добавляется в компонент mat-form-field, и диапазон, содержащий строку для заполнителя, не теряет mat-empty mat-form-field-empty классы.

Это результат:

Placeholder issue

Кто-нибудь может мне помочь?

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