Can I use formControl valueChanges to detect changes to a mat-chip-list?

user_1188074 0
Viewed 845

I have a mat-chip-list and want to detect when it changes ie: items added or removed.

I expected I could attach a form control to it and utilise the valueChanges observable to achieve this ie:

<mat-chip-list #chipList [formControl]="chipListCtrl">

chipListCtrl = new FormControl();
...
this.fruitCtrl.valueChanges.pipe(tap(value => console.log('fruitCtrl: ', value))).subscribe();

However this is not logging anything to the console.

Refer to Stackblitz where the input control successfully works in this manner, but the chip list does not.

Is this possible and if so what do I need to do to get it to work?

angular-reactive-forms angular-material angular
2 Answers

The chip list does not emit valueChanges because you are not updating it's value. You are updating the fruits array which is in no way connected to your formControl.

I've forked your stackblitz so that the events update the value of your chipListCtrl and the contents of the mat-chip-list are using chipListCtrl.value instead.

user_45501580

You don't need formControl to detect changes in mat-chip-list. According to the documentation - https://material.angular.io/components/chips/api, you can directly use (change) eventemitter.

@Output()
change: EventEmitter

Event emitted when the selected chip list value has been changed by the user.

user_96183780
Related