material md-select 与反应式 formcontrol 不更新值

Question

我正在使用来自@angular/material的md-tabs构建多步表单。

Angular 4.2.x
Material 2.0.0-beta.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]]
    });
  }
}

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

问题一：输入值的 Formcontrol 正在工作，但 md-select 值没有绑定。

问题2：最奇怪的部分是 "type" formgroup 中的 formcontrol 在 selecting select 框中的一项上被删除。

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

Answer 1

你的两个问题都是由于将值绑定到 md-option 的方式不正确导致的 [value]="sample1"。

angular中的

[]是属性绑定运算符，angular会寻找变量的值sample1 从你的组件。这里你没有在你的组件中定义那些 sample1, sample2 作为 public 变量，所以你的 md-option 的值将是未定义的。

猜猜你可能想按以下方式绑定它：

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

所以对于你的问题：

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

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

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

当 formControl 的值更改为 undefined 时，它将从 form.value 集中删除。

material md-select 与反应式 formcontrol 不更新值

material md-select with reactive formcontrol is not updating values

angular-material2

angular