feat(MatChipList): add better out-of-the-box support for FormControls

[jhajkom]

trafficstars

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/chips-autocomplete-required-failure?file=app/chips-autocomplete-example.ts

Steps to reproduce:

1. Fork the mat-chips autocomplete example from the Angular documentation
2. Move the form control to the mat-chip-list and add required attribute
3. Try using the auto complete 💥

NOTE: Followed suggestion in the following issue to add the required field, but that example doesn't include autocomplete. With this the autocomplete breaks. https://github.com/angular/components/issues/14195

Expected Behavior

The autocomplete should filter results based on text entered.

Actual Behavior

The autocomplete does not filter the results based on the text input from the user.

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Browser(s): Chrome 81.0.4044.138
• Operating System (macOS): Mojave 10.14.6

[mmalerba]

Confirmed that this is still an issue, here's an updated stackblitz: https://stackblitz.com/edit/chips-autocomplete-required-failure-ejmtxd?file=material-module.

[mmalerba]

Actually, I think this may just be an issue with the repro code. Here's an example where it seems to work correctly https://stackblitz.com/edit/angular-n6tpca-k4imsc?file=app/chips-autocomplete-example.html

[jhajkom]

Hello @mmalerba thank you for your response, I believe this is still an issue. Using a mat-hint with a mat-error class is not the same as using a mat-error. The filed is also not responsive in terms of the validation. What I mean by that is that it does not turn red when there are errors. Your mat-error with text boooe does not show when the form is invalid.

In the example provided in the above description (#14195) the recommendation was to move the form control to the mat-chip-list where the form validation works perfect. However, you then cannot use the autocomplete as it does not predict words based on what you type.

[mmalerba]

Sorry, is this more like what you were trying to do? https://stackblitz.com/edit/chips-autocomplete-required-failure-txn7nn?file=app/chips-autocomplete-example.ts

It does feel like it could work a little better out of the box, without me having to manually update the control value in a bunch of different listeners. I'll reopen this issue to track improving the out of the box experience

[jhajkom]

@mmalerba Yeah, your second example is exactly it. Thanks for taking the time to look into it and reopening the ticket. 🙂

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[DDDarylll]

@mmalerba When the fruits array is initially empty，it will have a red border for 0.1 second clicking an option, how can i solve this unexpected behavior