Ionic2不会禁用表单控件

时间:2016-11-05 01:12:56

标签: angular ionic2

尝试以下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>
      <ion-item>
        <ion-label stacked>Business Name</ion-label>
        <ion-input formControlName="myConsole" type="text"></ion-input>
      </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],
      myConsole: ['']
    });
  }

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

    ctrlToBeDisabled.enable(false);
    ctrlToBeDisabled.disable({ onlySelf: true });
    ctrlToBeDisabled.disable(true);
    ctrlToBeDisabled.disable();
  }
}

禁用'myConsole'工作的所有选项都没有。有人可以指出错误吗?或者,这是一个大的?

Ionic Framework版本:2.0.0-rc.2, Ionic CLI版本:2.1.0 Ionic App Lib版本:2.1.0-beta.1

1 个答案:

答案 0 :(得分:0)

我没有执行过代码,但是从阅读中我至少指出了两件事:

if (requestCode == Constants.VIDEO_REQUEST_CODE) { if (resultCode == RESULT_OK) { if (fileUri != null) { // check here if that file exists // if yes get that file and use as per requirement } } } 应该阅读 var img1 = (pictureBox1.Image = Properties.Resources.dynamite); var img2 = (pictureBox2.Image = Properties.Resources.apple); if (img1 != img2) { MessageBox.Show("ok"); pictureBox1.Image = Properties.Resources.empty; } else { MessageBox.Show("no"); Game_Over end = new Game_Over(); end.Show(); }

我将FormGroup创建为FormControlName="consoleType"生命周期方法:

formControlName="consoleType"

我不知道它是否导致在构造函数中执行此操作时遇到问题,但我已经阅读了示例代码,对我来说它正在工作。

ionViewDidLoad()的类型定义具有以下禁用控件的方法:

ionViewDidLoad() {
  this.consoleTypeForm = formBuilder.group({
    consoleType: ['', Validators.required],
    myConsole: ['']
  });
}

由此我尝试禁用:

AbstractControl

/**
 * Disables the control. This means the control will be exempt from validation checks and
 * excluded from the aggregate value of any parent. Its status is `DISABLED`.
 *
 * If the control has children, all children will be disabled to maintain the model.
 */
disable({onlySelf, emitEvent}?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
}): void;

告诉我它是否有帮助,如果创建了一个Plunkr,我们可以使用你的代码。