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

Created on 6 Feb 2020 · 2Comments · Source: angular/components

Reproduction

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

Steps to reproduce:

(Skip these steps and just refer to the StackBlitz)
Create a Reactive Form with MatSelect component
Set the initial value for the MatSelect component when creating the form (e.g. with FormBuilder, etc.)
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

P3 materiaselect has pr

Source

trevorhreed

Most helpful comment

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

trevorhreed on 7 Feb 2020

👍4

All 2 comments

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

trevorhreed on 7 Feb 2020

👍4

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"> <mat-form-field> <mat-label>Color</mat-label> <mat-select [(value)]="state.name" formControlName="state"> <mat-option *ngFor="let state of stateList" [value]="state"> {{ state.name }}</mat-option> </mat-select> </mat-form-field> </form>

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