docs-bug(material/chips): 'Chips with form control' example does not reflect formControl value

[jeripeierSBB]

Documentation Feedback

The recently added 'Chips with form control' example (#22814, @devversion) does never show any value at 'Selected keywords'. It seems that the formControl never gets updated.

<p>
  Selected keywords: {{formControl.value}}
</p>

I made a working example here: https://stackblitz.com/edit/angular-o2zelu?file=src/app/chips-form-control-example.ts, but I'm wondering if it should really be necessary to update formControl manually (like I did in stackblitz example)?

export class ChipsFormControlExample {
  formControl = new FormControl(['angular', 'how-to', 'tutorial']);

  addKeywordFromInput(event: MatChipInputEvent) {
    if (event.value) {
      this.formControl.setValue([...new Set([...this.formControl.value, event.value])]);
      event.chipInput!.clear();
    }
  }

  removeKeyword(keyword: string) {
    this.formControl.setValue([...this.formControl.value].filter((entry) => entry !== keyword));
  }
}

Affected documentation page:

https://material.angular.io/components/chips/examples

[jeripeierSBB]

It seems that I mixed up value list and selection of chips. If I select a chip with SPACE key then it gets reflected into the formControl. Somehow confusing for me. Maybe a clarification could be added?

[devversion]

Yeah, I think you're right that we should clarify this a bit more in this example.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}