Setting initial value of MatSelect using Reactive Forms does not set matSelect.value

[trevorhreed]

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-reabu9?file=src%2Fapp%2Fapp.module.ts

Steps to reproduce:
0. (Skip these steps and just refer to the StackBlitz)

1. Create a Reactive Form with MatSelect component
2. Set the initial value for the MatSelect component when creating the form (e.g. with FormBuilder, etc.)
3. Display the value of the MatSelect (e.g. using a template ref: <mat-select #select>...</mat-select> ... {{ #select.value }})

Expected Behavior

The value of #select.value should be equal to the initial value set in the FormGroup/FormControl

Actual Behavior

The value for #select.value is empty

Environment

• Angular: 8
• CDK/Material: 8
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[trevorhreed]

I'm setting an initial value at src/app/app.component.ts:19. See below.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  form: FormGroup
  data: any
  
  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      color: ['#0000FF'] // <— INITIAL VALUE SET HERE
    })
  }
}

[chaudharydivya]

Hi I am facing an issue with reactive form control usage. For mat-select I have a default JSON array with name and id. Of which I am showing only name in the drop down. I want to set a name as default using similar JSON but I am not able to do that. Kindly suggest :
`<form [formGroup]="form">

Color
<mat-select [(value)]="state.name" formControlName="state">
<mat-option *ngFor="let state of stateList" [value]="state">
{{ state.name }}

`

ts file :
this.stateList=[{name:'def',id:'1'},{name:'ghi',id:'2'}]; this.form = this.formBuilder.group({ state: {name:'abc',id:'1'} })

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}