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

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 https://github.com/angular/material2/issues/6970#issuecomment-328355857):

<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; 
}

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;
}

@mluis if you set the value in the formGroup to use one of the mat-select-options then the view will update like this https://stackblitz.com/edit/angular-material2-issue-3eafh1?file=app/app.component.ts,

or you can simply use an ngModel on the select to kinda fake it with a new value like here https://stackoverflow.com/questions/50487942/set-select-input-value-via-angular-fromcontrol-value/50488087?noredirect=1#comment87989723_50488087

What is the status of pull request merging?

Did anyone find a workaround to that issue?

Awesome! Waiting hard for that fix to get released 👍

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?

There should be value attribute on the mat-option tag

<mat-option *ngFor="let item of items" [value]="item.name"> {{item.name}} </mat-option>

@clima27 as I have stated above after edit, I have fixed the problem. It was a simple mistake on my side. Check the stackblitz example from above

@mluis if you set the value in the formGroup to use one of the mat-select-options then the view will update like this https://stackblitz.com/edit/angular-material2-issue-3eafh1?file=app/app.component.ts,

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;
  }
}