select component - bug when used with reactive form - not usable inside formGroup

[avindor]

Bug

when using a select component inside a reactive form, and updating the selection using the select component, the corresponding formControl is not being updated,

say I have a component that is inside formGroup:

html:
<form [formGroup]="formGroup">
<mat-form-field>
  <mat-select placeholder="Pick item..." formControlName="selectedItem">
    <mat-option *ngFor="let item of items">
        {{item.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
</div>
<button (click)="changeValue()">Change value</button>

---

component:

{

@ViewChild(MatSelect)selectComponent:MatSelect;


     ngOnInit(){
      this.formGroup = this.formBuilder.group({
            selectedItem: ['', Validators.required],
      });

    this.items = [{name:'a'},{name:'b'},{name:'c'}];



}
   changeValue(){
     this.selectComponent.value = this.items[1];
   } 
}

when I press the "Change value" button, the selectComponent.value is being set,
and the changes do reflect on the ui, but the corresponding formControl(selectedItem) is not being set
and the form is invalid (the field is required)

What is the expected behavior?

the formControl should be updated with the value being set on the select component

What is the current behavior?

the formControl is not being updated

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.7.2
Node: 8.9.1
OS: win32 x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.3
@angular/cli: 1.7.2
@angular/material-moment-adapter: 5.2.3
@angular/material: 5.2.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Is there anything else we should know?

[julianobrasil]

As the options are objects, it's normal that the comparison fails when you select programmatically the value. You need to set a compareWith function (take a look at #6970 (comment)):

<mat-form-field>
  <mat-select placeholder="Pick item..." formControlName="selectedItem" 
    [compareWith]="compareFn">
    <mat-option *ngFor="let item of items">
        {{item.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
<button (click)="changeValue()">Change value</button>

compareFn: ((f1: any, f2: any) => boolean) | null = this.compareByValue;

compareByValue(f1: any, f2: any) { 
  return f1 && f2 && f1.name === f2.name; 
}

[avindor]

First of all, I'm using the same object when selecting - I have a list of items and I'm selecting one of them, so there should be no issue with comparison.

In my original code, I am using a compareWith input, but still having the same behavior, here is a more complete example that uses compareWith and is not working:

when I click the "selectOption" button, the ui changes, but the form control (reflected in the ui with the following html: <p class="col-auto selected-food"> Selected value: {{formGroup.get('favoriteFood').value | json}} </p> is not changing

html:
------------------

<form [formGroup]="formGroup" class="col-12">
 <div class="row mt-5 justify-content-center align-items-baseline">
   <mat-form-field class="col-auto">
     <mat-select [compareWith]="compareFn" formControlName="favoriteFood" placeholder="Favorite food">
       <mat-option *ngFor="let food of foods$ | async" [value]="food">
         {{food.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>

   <p class="col-auto selected-food"> Selected value: {{formGroup.get('favoriteFood').value | json}} </p>
 </div>

  <button mat-button (click)="openSelection()">Open</button>
  <button mat-button (click)="clearSelection()">Clear Selection</button>
  <button mat-button (click)="selectOption()">Select</button>
</form>
component:
-------------------------
import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatOption, MatSelect} from '@angular/material';
import {Observable} from 'rxjs/Observable';
import {FoodProvider} from '../../../application-model/services/food-provider';
import {Food} from '../../../domain-model/entities/food';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  host:{
    class:'row justify-content-center'
  }
})
export class HomeComponent implements OnInit {


  @ViewChild(MatSelect) select: MatSelect;

  formGroup:FormGroup;
  foods$:Observable<Food[]>;

  constructor(private foodProvider:FoodProvider, private formBuilder:FormBuilder) { }
  
  
  compareFn(f1:Food, f2:Food):boolean{
    return f1.value == f2.value && f1.viewValue == f2.viewValue;
  }

  get selectedFood(): Food{
    return new Food(this.formGroup.get('favoriteFood').value);
  }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      favoriteFood:['',[Validators.required]]
    });

    this.foods$ = this.foodProvider.getFood();

    this.formGroup.get('favoriteFood').patchValue(this.foodProvider.getDefaultFood());
  }

  openSelection() {
    this.select.open();
  }

  clearSelection(){
    this.select.value = null;
  }

  selectOption() {
     this.foods$.subscribe(options => {
       this.select.value = options[1];
     });
  }
}


service:
///////////////////////////////////////


import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import {Food} from '../../domain-model/entities/food';

@Injectable()
export class FoodProvider{

  private readonly foodSubject:BehaviorSubject<Food[]> = new BehaviorSubject<Food[]>([

    new Food(  {value: 'steak-0', viewValue: 'Steak'}),
    new Food({value: 'pizza-1', viewValue: 'Pizza'}),
    new Food({value: 'tacos-2', viewValue: 'Tacos'})


  ]);

  getFood():Observable<Food[]>{
      return this.foodSubject.asObservable();
  }


  getDefaultFood():Food {

    var foods:Food[] = this.foodSubject.getValue();
    return foods[0];
  }
}



export class Food{
  value:string;
  viewValue:string;

  constructor(props:{value:string, viewValue:string}){
    this.value = props.value;
    this.viewValue = props.viewValue;
  }
}

[julianobrasil]

I'm using the same object when selecting

I completely missed that part, sorry.

[julianobrasil]

Aparently this is causing this behavior:

https://github.com/angular/material2/blob/915a2b732760eca047939acff7b79c00f7bc27e7/src/lib/select/select.ts#L394-L402

It looks like the ControlValueAcessor registered "onChange" function should have been called too:

if (newValue !== this._value) {
  this.writeValue(newValue);
  this._onChange(newValue);
  this._value = newValue;
}

[crisbeto]

Thanks for looking into it @julianobrasil, that is definitely the issue.

[mdklab]

What is the status of pull request merging?

[casizzi]

I have an issue where I cannot set the value of the <mat-select> when using in conjuction with a reactive form group, is this also related to this issue?

[mluis]

I'm having the same issue as @casizzi . "@angular/material": "^5.2.4"