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

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

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