Ionic-framework: ion-input ignores the `disabled` attribute when created using a FormControl in a Reactive Form

[kelvindart]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When you create a form using the FormBuilder.group(...) method and assign an ion-input to a FormControl, it seems to ignore the disabled attribute set in the state object, documented here: https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html, and the ion-input is enabled regardless.

On a regular HTML input this seems to work as expected, so I am thinking it's something in the ion-input not correctly being set.

N.b. when I set the disabled attribute directly in the mark-up on ion-input it does follow the correct behaviour:

<ion-input type="text" formControlName="ioninput" disabled></ion-input>

But this is undesired (since I cannot set it programatically) and I receive the following console warning from Angular:

Expected behavior:
For the ion-input to be disabled, if set in the state object passed in as a parameter to the FormControl constructor.

Brief illustration of the issue:

Steps to reproduce:
Plunkr: http://plnkr.co/edit/qFRbCc2FI6BDJ7vMp5I7?p=preview

Related code:

this.fg = fb.group({
  ioninput: [{ value: 'Ion Input...', disabled: true }],
  input: [{ value: 'HTML Input', disabled: true }]
});

<form>
  <ion-list [formGroup]="fg">

    <ion-item>
      <ion-label stacked>Ion Input</ion-label>
      <ion-input type="text" formControlName="ioninput"></ion-input>
    </ion-item>

    <ion-item>
      <input type="text" formControlName="input" />
    </ion-item>

  </ion-list>
</form>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.2.1 Build version 8C1002

Edit: Fixed the broken link to the animated gif illustrating the issue.

[kelvindart]

I guess a workaround would be to bind disabled to an input property, e.g.:

<ion-input formControlName="ioninput" [disabled]="isDisabled"></ion-input>

However, if we are to use truly Reactive forms this would be less ideal, and we still receive the Angular console warning above, so I believe this to still be a bug. 😄

[jgw96]

Thanks for the very detailed issue, helps with debugging a ton! We will take a look into this, most likely ion-input is just not passing on the disabled attribute to the actual input that it wraps.

[kelvindart]

Happy to help :) I figured the more info the better. Great - doesn't sound too too complex (I hope :P).

[brandyscarney]

Thanks for the issue! I submitted a PR for this here: #9994 and I released a nightly version including the fix: [email protected]

Could you try it out and let me know if you find any issues? :)

[kelvindart]

Wonderful! :) Thanks so much.

I will update to the nightly and run locally, reporting back my findings.

Thanks for the fast turnaround - great job!

[zakton5]

Has this also been fixed for other controls such as ion-toggle, ion-textarea, etc.?

[kelvindart]

Thanks so much for the fix on ion-input @brandyscarney - I can confirm this indeed works in the nightly. 😬

[kelvindart]

@zakton5 - it appears one of Mike Hartington of Ionic has raised a bug: #9998. I guess it's a generic ion-... control issue.

[jtushar53]

hi @brandyscarney , i can confirm the issue still exist on latest nightly [email protected]

here is repo

ionic info :-
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5-201701131937
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

[brandyscarney]

@zakton5 @kelvindart Yes, it should be working for the other controls now: https://github.com/driftyco/ionic/pull/10006

I'm not sure if a nightly was released after merging that though, so I just released a new one: [email protected]

[brandyscarney]

@jtushar53 Angular doesn't recommend mixing the disabled attribute and formControl, so this is behaving as designed. See the comment on this issue for more information: https://github.com/angular/angular/issues/11271#issuecomment-244507976

You would need to do something like this:

this.loginForm = fb.group({
  "username": [{value: "", disabled: true}, Validators.required],
  "password": ["", Validators.required]
});

[jtushar53]

@brandyscarney thanks its working now. my concern was to enable disable control whenever i want
i acheived this using below code
this.loginForm.controls['username'].enable() or this.loginForm.controls['username'].disable();

[matejamateusz]

I don't know if it is connected or not to the issue but is it fixing also the 'clearInput' issue when there is formControlName attribute? Thanks in advance https://github.com/driftyco/ionic/issues/9077

[wagner18]

So, enable() and disable() works to programmatically control field state when using reactive forms, however @jtushar53, I don't know if you were aware about this, but for those who aren't

When using the disable() FormControl method it will invalidate the whole form.

So if you have to control the state of a field but still need to keep the form as VALID you will have to use some workaround to do so.

There is a discussion on that matter, take a look to more details.
https://github.com/angular/angular/issues/11271

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