Angular material autcomoplete with chips. Как правильно реализовать логику переиспользуемого компонента?
Я хочу реализовать переиспользуемый компонент на основе angular-material с автозаполнением и чипами. Проблема у меня в том, что я не могу найти правильного пути для построения логики реактивной формы для этого компонента. Пример переиспользуемого компонента:
<app-chips-autocomplete
formControlName="fruits">
</app-chips-autocomplete>
Он принимает FormControl/FormControlName, который внутри я получаю через функцию inject(). Внутренняя реализация компонента выглядит примерно так, код упрощён:
<mat-chip-list [disabled]="disabled">
<mat-chip
*ngFor="let chip of chipsList">
{{ chip.name }}
</mat-chip>
</mat-chip-list>
<mat-form-field>
<mat-label>{{ label }}</mat-label>
<input
#input
matInput
class="input"
[formControl]="control"
[type]="type"
[matAutocomplete]="autocomplete" />
<mat-autocomplete
#autocomplete="matAutocomplete"
(optionSelected)="onOptionSelect($event, input)">
<ng-container *ngIf="{ options: options$ | async } as ctx">
<mat-option
*ngFor="let option of ctx?.options"
[value]="option"
[disabled]="parentDisabled && !option?.parent">
{{ option.label }}
</mat-option>
</ng-container>
</mat-autocomplete>
</mat-form-field>
FormControl, который я принимаю внутри используется для хранения массива чипов, но использовать его на input, с помощью которого я совершаю поиск, я думаю, неверно. То есть он у меня используется и для хранения массива чипов и подключён к текстовому полю ввода из-за чего значение formControl меняется то на строку, то на массив чипов.
В итоге я хочу оставить FormControl только для чипов, а на поле ввода повесить директиву ngModel и использовать с событием ngModelChange:
<input
#input
matInput
ngModel
class="input"
[type]="type"
[matAutocomplete]="autocomplete"
(ngModelChange)="onInput($event)" />
И то, что я выбираю из выпадающего списка добавлять на уровне кода в formControl.
Не знаю, правильное ли данное решение, хочу, чтобы у кого есть опыт подсказали как лучше всего реализовать данный функционал.