マテリアルmd-select with reactive formcontrolは値を更新しません

Question

@ angle/materialからmd-tabsを使用して複数ステップフォームを作成しています。

• 角度4.2.xでは
• 材料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]] 
    }); 
    } 
} 

モジュールのインポートに関するエラーはありません。必要なものがすべて含まれています。

問題1： 入力値のFormcontrolは機能していますが、md-select値はバインドされていません。

問題2： ほとんどの奇妙な部分が「タイプ」フォームコントロール内フォームグループが削除されています。

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

Answer 1

あなたの2つの質問の両方が[value]="sample1"としてmd-optionに値を結合する間違った方法によって引き起こされます。

[]の角度はプロパティバインディング演算子です。角度は変数sample1の値をコンポーネントから探します。ここでは、sample1、sample2をコンポーネントのパブリック変数として定義しなかったので、mdオプションの値は未定義になります。

はちょうどあなたが方法を以下のようにそれをバインドしたいことがあり推測：

ご質問については、これ

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

---

：

Formcontrol入力値のためにされた作業が、MD-選択値のためにしています束縛しない。

あなたmd-optionは真の価値を持っていないので、何もマッチしたオプション選択された状態にsettedされて存在しません。

ほとんどの奇妙な部分は「タイプ」フォームコントロール内フォームグループが選択ボックスの1つの項目を選択して削除されています。

formControlの値が未定義に変更されると、それはform.valueセットから削除されます。