Я расширяю компонент 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 классы.
Это результат:
Кто-нибудь может мне помочь?