Angular. Привязка chip к полям формы

Необходимо оформить форму фильтра так, что в зависимости от того, какие поля фильтра введены, появлялся соответствующий chip. Также необходимо осуществить возможность очистки поля фильтра, если был удалён соответствующий chip и наоборот. Ещё не было бы лишним оформить отображение чипсов как "название поля фильтра:" + "его значение".

HLTM:

<div>
    <mat-chip-list>
      <mat-chip *ngFor="let chip of arrChipsFilter" [removable]="true" (removed)="removeChip(chip)">
        {{ chip.name }}
          <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>
</div>

Добавление чипсов осуществлено с помощью подписки, тем самым получая новые данные конкретного поля в форме. Ранее пробовала через подписку на форму, но это гиблое дело. TS:

merge(
      this.tapJournalForm.controls.registry.valueChanges,
      this.tapJournalForm.controls.paymentType.valueChanges,
      this.tapJournalForm.controls.expertiseType.valueChanges
    )
      .pipe(distinctUntilChanged(), takeUntil(this.unsubscribe$))
      .subscribe((v: any) => {
        console.log(v);
        this.arrChipsFilter.push({name: v.name});
      });