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

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

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

问题2：最怪异的部分是＆＃34; type＆＃34;当选择一个选择框项目时，表格组内的formcontrol正被删除。

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

Answer 1

您的两个问题都是由于将md-option的值绑定为[value]="sample1"的错误方式造成的。

角度为

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

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

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

所以对于你的问题：

输入值的Formcontrol正在运行，但对于md-select值没有绑定。

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

最奇怪的部分是＆＃34;类型＆＃34;当选择一个选择框项目时，表格组内的formcontrol正被删除。

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

具有反应式formcontrol的材料md-select不会更新值

1 个答案: