Question

尝试使用ionic2 / angular2的以下HTML和控制器代码：

<ion-content class="home">

  <ion-list>
    <form [formGroup]="consoleTypeForm">
      <ion-item>
        <ion-label>Gaming</ion-label>
        <ion-select FormControlName="consoleType" (ionChange)="printSV($event)">
          <ion-option value="nes">NES</ion-option>
          <ion-option value="n64">Nintendo64</ion-option>
          <ion-option value="ps">PlayStation</ion-option>
          <ion-option value="genesis">Sega Genesis</ion-option>
          <ion-option value="saturn">Sega Saturn</ion-option>
          <ion-option value="snes">SNES</ion-option>
        </ion-select>
      </ion-item>
    </form>
</ion-list>

</ion-content>

控制器类：

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  templateUrl: 'home.html'
})
export class HomePage {
  consoleTypeForm: FormGroup;

  constructor(public nav: NavController, public menu: MenuController, public     formBuilder: FormBuilder) {
    this.consoleTypeForm = formBuilder.group({
      consoleType: ['', Validators.required],
    });

    const ctrl = this.consoleTypeForm.controls['consoleType'];

    console.log("In constructor -- valid is " + ctrl.valid);
    console.log("In constructor -- touched is " + ctrl.touched);
    console.log("In constructor -- invalid is " + ctrl.invalid);
    console.log("In constructor -- pristine is " + ctrl.pristine);
    console.log("In constructor -- Dirty is " + ctrl.dirty);
  }

  printSV(value)
  {
    const ctrl = this.consoleTypeForm.controls['consoleType'];

    console.log("valid is " + ctrl.valid);
    console.log("touched is " + ctrl.touched);
    console.log("invalid is " + ctrl.invalid);
    console.log("pristine is " + ctrl.pristine);
    console.log("Dirty is " + ctrl.dirty);
    console.log("Ctrl Value is " + ctrl.value);
    console.log("Value is " + value);
  }
}

即使在选择值之后，从构造函数和“printSV”打印的值也是相同的。有人可以指出错误吗？或者，这是一个大的？

离子信息输出是：离子框架：2.0.0-rc2 离子CLI：2.1.0 Ionic App Lib版本：2.1.0-beta.1

Answer 1

更改

<ion-select FormControlName="consoleType" (ionChange)="printSV($event)">

到

<ion-select formControlName="consoleType" (ionChange)="printSV($event)">

解决问题

使用FormControlName无法更新脏/有效/原始/触摸/值的离子选择值

1 个答案: