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.

Не знаю, правильное ли данное решение, хочу, чтобы у кого есть опыт подсказали как лучше всего реализовать данный функционал.


Ответы (0 шт):