feat(MatChipGrid): Update form component value on chip removal

[eolant]

Feature Description

In existing example from the docs for MatChip with Reactive form (https://material.angular.io/components/chips/overview#chips-reactive-form) the changes to the form component are not pushed until you de-focus the input field i.e see in this example https://stackblitz.com/edit/vfwahhih?file=src%2Fexample%2Fchips-reactive-form-example.ts output of Values being updated only when you deselect the input.

Ideally it would be great if there was a method to trigger form control value update whenever chips gets deleted because atm when you inputting chips and deleting them, you not losing focus from the input field and you'll need to click out of the field to see changes.

Use Case

For example I have another dropdown field which prompts user to select a movie of the ones he listed in the chips field. If user decides to delete the movie from chips I want to react to this change immediatly for a better UX and clear the following field with selected value.

This is the most basic scenario but they can be way more complicated and with bigger forms, conditional fields and required field groups and with dynamic form fields and field types which requires to abstract away from the chips handling itself and use field value as a source of thruth itself.

This is what my workaround looks like atm which is quite ugly and it would be a lot nicer if it was handled by Angular Material internally or at least there was a separate method to call and sync chips to form control value.

this.isFocusTransitioning.set(true);
this.matInput()?.focus();
(this.document.activeElement as HTMLElement).blur();
setTimeout(() => {
  this.matInput()?.focus();
  this.isFocusTransitioning.set(false);
});