Ionic2不会禁用表单控件

尝试下面的HTML：Ionic2不会禁用表单控件

<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的工作。有人能指出这个错误吗？或者，这是一个大？

离子Framework版本：2.0.0-rc.2，离子CLI版本：2.1.0 离子应用程序库版本：2.1.0-beta.1

来源

2016-11-05 jdm

我还没有执行的代码，但从阅读中，我指出了至少两件事情：

FormControlName="consoleType"应该读formControlName="consoleType"

我把创建FormGroup到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;

，从我会尝试禁用与：

control.disable();

或

control.disable({onlySelf: true});

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

来源

2016-11-05 10:36:38 hgoebl

Ionic2不会禁用表单控件

回答

相关问题