材料md-使用反应形式控制的选择不更新值。

Question

我正在建立多步形式使用md-tabs从@角/材料。

• 角4.2.x
• 材料2.0.0-β10
• 反应式模块

我的模板：

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

构成部分：

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

没有关于模块导入的错误，因为我包含了所有必需的。

问题1:输入值的表单控制是有效的，但是对于md-select值是不绑定的.

问题2:大多数奇怪的部分是表单组中的“类型”格式控制，在选择一项复选框时会被删除。

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

Answer 1

这两个问题都是由于将值绑定到md-option作为[value]="sample1"的不正确方式造成的。

[]中的角是属性绑定运算符，角将从组件中查找变量 sample1的值。这里您没有将那些sample1、sample2定义为组件中的公共变量，因此您的md-选项的值将是未定义的。

只需猜一猜，您可能希望按以下方式绑定它：

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

所以对于你的问题：

输入值的窗体控制是有效的，但是对于md-select值不是绑定的.

您的md-option没有实际值，因此不会将匹配选项设置为选定的状态。

最奇怪的部分是表单组中的“类型”格式控制在选择一项复选框时被删除。

当一个formControl的值更改为未定义的时，它将从form.value集合中删除。