material md-select with reactive formcontrol is not updating values

Question

I am building multi-step form using md-tabs from @angular/material.

Angular 4.2.x
Material 2.0.0-beta.10
Reactive Form Module

My Template :

<form novalidate [formGroup]="crForm">
  <md-tab-group class="tab-group" dynamicHeight="true [(selectedIndex)]="crFormSelectedTab" >
    <md-tab label="Provide basic info">
      <div fxLayout="column" >
        <div fxLayout fxLayoutGap="10px" class="form-layout">
          <md-form-field fxFlex="30%" fxFlex.xs="100%">
            <input mdInput placeholder="Title" formControlName="title"/>
          </md-form-field>
        </div>
        <div fxLayout="row" fxLayoutGap="10px" class="form-layout">
          <md-select placeholder="Change request Type" fxFlex="30%" fxFlex.xs="100%" formControlName="type">
            <md-option [value]="sample1">
              request1
            </md-option>
            <md-option [value]="sample2">
              request2
            </md-option>
            <md-option [value]="sample3">
              request3
            </md-option>
          </md-select>
          <md-select placeholder="Analysis priority" fxFlex="30%" fxFlex.xs="100%" formControlName="priority">
            <md-option [value]="sample1">
              request1
            </md-option>
            <md-option [value]="sample2">
              request2
            </md-option>
            <md-option [value]="sample3">
              request3
            </md-option>
          </md-select>
        </div>
        <div fxLayout="row" fxLayout.xs="column" fxFlex="50%" fxLayoutGap="10px" fxLayoutAlign="start center" class="form-layout">
          <md-form-field fxFlex="30%" fxFlex.xs="100%">
            <input mdInput placeholder="Change Specialist 1" formControlName="CS1" />
            <md-hint align="start"><strong>WOSO / wos / 00310140</strong> </md-
  hint>
          </md-form-field>
          <label fxFlex="15%" fxFlex.xs="20%">Is an upgrade required?</label>
          <md-radio-group fxFlex="29%" fxFlex.xs="80%">
            <md-radio-button value="yes">yes</md-radio-button>
            <md-radio-button value="no">no</md-radio-button>
          </md-radio-group>
        </div>
      </div>
    </md-tab>
    <md-tab label="select trigger">
      <div fxLayout="row" fxLayoutGap="10px" class="form-layout">
        <md-select multiple placeholder="PBS ID" fxFlex="30%" fxFlex.xs="100%" formControlName="PBSID">
          <md-option [value]="sample1">
            request1
          </md-option>
          <md-option [value]="sample2">
            request2
          </md-option>
          <md-option [value]="sample3">
            request3
          </md-option>
        </md-select>
        <md-select placeholder="PCCSTRAIM ID" fxFlex="30%" fxFlex.xs="100%">
          <md-option [value]="t1">
            TYPE1
          </md-option>
          <md-option [value]="t2">
            TYPE2
          </md-option>
          <md-option [value]="t2">
            TYPE3
          </md-option>
        </md-select>
      </div>
    </md-tab>
    <md-tab label="provide details">
    <!--  <div fxLayout="row" fxFlex="1 1 100%" fxLayoutAlign="end end">
      <button md-raised-button  fxFlex="1 1 10%" 
 (click)="prevTab()">Back</button>
      <button md-raised-button color="primary" fxFlex="1 1 10%" 
 (click)="nextTab()">Next</button>
    </div> -->
    </md-tab>
    <md-tab label="impact analysis">
      <div fxLayout="row" fxLayoutGap="10px" class="form-layout">
        <md-select placeholder="Impacted product baseline" fxFlex="30%" 
 fxFlex.xs="100%" formControlName="impactedItems">
          <md-option [value]="sample1">
            request1
          </md-option>
          <md-option [value]="sample2">
            request2
          </md-option>
          <md-option [value]="sample3">
            request3
          </md-option>
        </md-select>
      </div>
    </md-tab>
  </md-tab-group>
</form>

Component :

import { Component, OnInit } from '@angular/core';
import { LocalHttpClientService } from '../../shared/local-http-
client.service';
import {  URLSearchParams } from '@angular/http';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-change-request-add',
  templateUrl: './change-request-add.component.html',
  styleUrls: ['./change-request-add.component.css']
})
export class ChangeRequestAddComponent implements OnInit {
  crFormSelectedTab: number;
  crId: number;
  crForm: FormGroup;
  constructor(private LHCP: LocalHttpClientService, private fb: FormBuilder) {
    this.crFormSelectedTab = 0;
  }
  ngOnInit() {
    this.crForm = this.fb.group({
      title: ['', [Validators.required, Validators.minLength(3)] ],
      type: ['', [Validators.required]],
      impactedItems: ['',[Validators.required]],
      PBSID: ['', [Validators.required]],
      CS1: ['', [Validators.required]],
      priority: ['', [Validators.required]]
    });
  }
}

There are no errors regarding module imports as i included all the required.

problem 1: Formcontrol for input values are working but for md-select value is not binding.

problem 2: most weird part is "type" formcontrol inside formgroup is being deleted on selecting one item of select box.

I have tested above statement with following 
{{ crForm.value|json }}

Pengyy Pengyy · Accepted Answer · 2017-09-11T09:05:11

Both of your two question is caused by incorrect way of binding values to md-option as [value]="sample1".

[] in angular is property binding operator, angular will look for value of variable sample1 from your component. Here you didn't define those sample1, sample2 as public variables in your component, so your md-option's value will be undefined.

Just guess you may want to bind it as below ways:

value="sample1"
[value]="'sample1'"

So for your questions:

Formcontrol for input values are working but for md-select value is not binding.

Your md-option don't have real value, so there will be no matched option been setted to selected status.

most weird part is "type" formcontrol inside formgroup is being deleted on selecting one item of select box.

When an formControl's value is changed to undefined, it'll be removed from form.value set.

material md-select with reactive formcontrol is not updating values

1 Answers