Ionic-framework: Ionic2 won't disable form control

[dmohan323]

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
2. 
   
   
   3.
   

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)

[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 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.

[zakton5]

This is quite an issue. Setting a FormControl's state to disabled with reactive forms does not disable components such as ion-item and ion-select.

[tkem]

Any news on this? I mean, Ionic even recommends using reactive forms nowadays: https://ionicframework.com/docs/v2/resources/forms/

[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.

[brandyscarney]

This should be fixed in the latest release 2.0.0-rc.6. Please let me know if you're still having an issue and I will reopen this, thanks!

[duca14036]

I found this bug @brandyscarney
Example:
form = new FormGroup({
.....
isAnonymouse: [{ value: true, disabled: true }],
.....
});
.....
It display element correctly, active and disabled

.....
when I try to get data using:
this.form.value.isAnonymouse
it's not present
http://plnkr.co/edit/8eQsk2i2pYUATRmmexZh?p=preview

[leandroz]

@brandyscarney this is still happening

[vancoyld]

@brandyscarney Yes I confirm that this issue is still happening on "ionic-angular": "3.9.2"

[corran2go]

As noone will fix this for the soon deprecated 3.x release, just ignore the warning and set the disabled attribute on your ion-select.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.