ChipList and Autocomplete does not display programmatically set model
See original GitHub issueBug, feature request, or proposal:
Bug
What is the expected behavior?
Programmatically setting the model on a mat-input
associated with both a mat-chip-list
and mat-autocomplete
should display the model value in the input.
What is the current behavior?
The value is not displayed in the input. Works when only a mat-chip-list
or mat-autocomplete
is associated with the mat-input
but not both.
What are the steps to reproduce?
http://plnkr.co/edit/n0vabloWOJwnGvjyWXAY
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular Material Beta 12 Angular 4.4.6
Issue Analytics
- State:
- Created 6 years ago
- Reactions:5
- Comments:7 (3 by maintainers)
Top Results From Across the Web
ChipList and Autocomplete does not display programmatically ...
Programmatically setting the model on a mat-input associated with both a mat-chip-list and mat-autocomplete should display the model value ...
Read more >Programmatically set model with ChipList and Autocomplete
Configure SystemJS --> <script src="systemjs.config.js"></script> <script> ... Submit marks the input as invalid, but does not show the error message until ...
Read more >How to programmatically update a MatChipList?
I have the following control using mat-chip-list . Once the user enters a few chips in the list and data is saved, I...
Read more >Chips - Angular Material
When a chip is not selectable, changes to its selected state are always ignored. By default an option chip is selectable, and it...
Read more >Chips Autocomplete - StackBlitz
<mat-form-field class="example-chip-list">. <mat-chip-list #chipList aria-label="Fruit. selection">. <mat-chip. *ngFor="let fruit of fruits".
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’ve hit the same issue. Instead of using an ngModel I used a FormControl. Resetting the FormControl value from within ChipInput change event works. Whenever I reset the FormControl value from within autocomplete.optionSelected callback the control value updates, but not the displayed value. I prepared a plunker to demonstrate this, too: https://plnkr.co/edit/dIpxrl?p=preview
As a workaround I reset the value directly on the input element.
The reason is both
mat-chip-list
andinput
areMatFormFieldControl
, and when you putmat-chip-list
in front ofinput
,mat-chip-list
is used inform-field
and the input will not get the model value. A workaround is puttinginput
beforemat-chip-list
in html: