ChipList and Autocomplete does not display programmatically set model

[martin-the-geek]

Bug, 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

[hirrus]

I think I have similar issue. I have 2 mat-form-field with mat-chip,input text and mat-autocomplete in my html.
Now, when i have one field(input text), it is working fine but when i have more than one then it is not working.

Here is the sample for one field emailTo which is working fine but when I add another field emailCC, this is not working. I have also attached the typescript code used by below code.
emailTo :

<mat-chip-list #chipList>
<mat-chip *ngFor="let tag of emailToRec" (remove)="remove(tag)">
{{tag.email}}
cancel

<input [matChipInputFor]="chipList"
[matChipInputAddOnBlur]="false"
(matChipInputTokenEnd)="addNew($event)"
[matAutocomplete]="auto"
name="emailTo" [(ngModel)]="model.emailTo" #emailTo="ngModel" ngDefaultControl
#chipInput (keyup)="filter()">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="add($event)">
<mat-option *ngFor="let tag of filteredAddresses" [value]="tag">
{{ tag.name }}
{{ tag.email }}

EmailCC:

<mat-chip-list #chipCCList>
<mat-chip *ngFor="let cctag of emailCCRec" (remove)="removeCC(cctag)">
{{cctag.email}}
cancel

<input [matChipInputFor]="chipCCList"
[matChipInputAddOnBlur]="false"
(matChipInputTokenEnd)="addNewCC($event)"
[matAutocomplete]="auto"
name="emailCC" [(ngModel)]="model.emailCC" #emailCC="ngModel" ngDefaultControl
#chipCCInput (keyup)="filterCC()">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="addCC($event)">
<mat-option *ngFor="let tagcc of filteredCCAddresses" [value]="tagcc">
{{ tagcc.name }}
{{ tagcc.email }}



Github_angular _issue.txt

[basti1253]

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.

[tinayuangao]

The reason is both mat-chip-list and input are MatFormFieldControl, and when you put mat-chip-list in front of input, mat-chip-list is used in form-field and the input will not get the model value.
A workaround is putting input before mat-chip-list in html:

  <p>
    <mat-form-field>
       <input matInput type="text" [matChipInputFor]="chipList1" placeholder="Input with Chip List and Autocomplete" [(ngModel)]="model1" [matAutocomplete]="auto1" />
        <mat-chip-list #chipList1>
            <mat-chip *ngFor="let c of chips">
                {{c.text}}
                <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
        </mat-chip-list>
       
    </mat-form-field>
    <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayWith">
        <mat-option *ngFor="let o of options" [value]="o">
            {{o.text}}
        </mat-option>
    </mat-autocomplete>
  </p>

[Shadowlauch]

@tinayuangao the problem with that workaround is that the formatting is extremly confusing to the user.

I have taken a bit of a hackish workaround to the problem that is very flawed, but the best solution I could find

I set the _control value in the ngAfterViewInit lifecycle event with the matInput MatFormFieldControl instance:

@ViewChild(MatFormField) formField: MatFormField;
@ViewChildren(MatFormFieldControl) formFieldControl: QueryList<MatFormFieldControl<any>>;


ngAfterViewInit(): void {
     this.formField._control = this.formFieldControl.last;
}

[hirrus]

I have found the issue and fixed it. It is working fine now in angular 4 and 5 both.
The issue was in the component where I was referring the same variable for @ViewChild for both the filed.

[tinayuangao]

@mmalerba Is it reasonable to have a list of FormFieldControls and let user choose one to use?

[tinayuangao]

Autocomplete doesn't require matInput. So if you remove the matInput on <input> there will be only one FormFieldControl inside <mat-form-field>.

 <mat-form-field>
    
        <mat-chip-list #chipList1>
            <mat-chip *ngFor="let c of chips">
                {{c.text}}
                <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
        </mat-chip-list>
        <input type="text" [matChipInputFor]="chipList1" placeholder="Input with Chip List and Autocomplete" [(ngModel)]="model1" [matAutocomplete]="auto1" />
    </mat-form-field>
    <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayWith">
        <mat-option *ngFor="let o of options" [value]="o">
            {{o.text}}
        </mat-option>
    </mat-autocomplete>