Ionic2 won't disable form control

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/ http://ionicworldwide.herokuapp.com/

Note: for build related issues you can open up an issue on the ionic-app-scripts repo

https://github.com/driftyco/ionic-app-scripts

Note: for Ionic-Native related issues you can open up an issues on the Ionic-Native repo

https://github.com/driftyco/ionic-native

Short description of the problem:

Ionic2 won’t disable form control

What behavior are you expecting?

Formcontrol to be disabled

Steps to reproduce:

1. see below

insert any relevant code between the above and below backticks
<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();
  }
}

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x Ionic Framework version: 2.0.0-rc.2, Ionic CLI version:2.1.0 Ionic App Lib Version:2.1.0-beta.1

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/GJte2b?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

[sraparlatmw]

Got the same issue. I got an ion-select and it’s disable attribute is throwing off a warning in the console.

It looks like you’re using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid ‘changed after checked’ errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

I removed the disabled attribute on the ion-select and applied it on the formControl as per the warning but was not able to make the ion-select disabled.

[devarg]

@brandyscarney I know you may be aware, the coexistence between FormGroup that is not getting along well with with ion-input, as angular handles states on native html inputs but seems to avoid ion-input, reason why I would go for the alternative you went with buttons using it like <button ion-button> and maybe to enable angular to hook in. As @dmohan323 I’m also seeing it fail hard with “disabled” state, and it isn’t applying it, and applying it through attribute binding is not an option as it spoils the FormGroup whole state to DISABLED, and kind of lock the great core features of ng forms module. I’d love some fine tuning in to ionic inputs to enable complex data input scenarios.