Ionic-framework: readonly attribute not rendering on ion-input tags

[kubacode]

Short description of the problem:

When conditionally applying the 'readonly' attribute to an ion-input, by using the Angular2 syntax [readonly]="variable", the ion-input tag does not apply the attribute to the rendered 'input' tag.

What behavior are you expecting?

Expect the 'readonly' attribute to be rendered on the input tag when "variable" is set to true.

Steps to reproduce:

1. Add an ion input tag with conditional readonly <ion-input [readonly]="isReadonly">
2. Set isReadonly variable to true
3. readonly attribute is not rendered on the resulting input tag

Which Ionic Version? 2.x

Plunker that shows an example of your issue

http://plnkr.co/edit/xKfiA5wR0aoYsm1n6nxe?p=preview

Run ionic info from terminal/cmd prompt:
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X Yosemite
Node Version: v4.4.2
Xcode version: Xcode 7.0 Build version 7A220

[iignatov]

Here's the related forum topic: https://forum.ionicframework.com/t/conditional-readonly-on-ion-input/50855.

[gigocabrera]

+1
Are there any workarounds for this while it gets implemented?

[masimplo]

Any news on this?

[rglaspey]

Would like to know when this is going to be fixed as well?

[Southpaw17]

I would also like to know when this is going to be fixed as well,

[sssemil]

Any improvements?

[joeldavuk]

Even if it did, there's issues in RC4 apparently you can workaround it using custom validators

[mariohmol]

Ideas for workarounds?

[sjdrew]

would be great to get this fixed.

[sjdrew]

Actually, looks like an oversight. In ionic-angular components/input/ it does not have any code to pass the readonly attribute back to the native angular element. I was able to add that code easily by just duplicating the logic/functions for the disabled attribute.

Attached is diff in case it helps anyone get by for now.

addReadonlyToInput.txt

[manucorporat]

I want to revisit all the inputs before ionic 2.0 final is released:
https://github.com/driftyco/ionic/issues/8578

[aperezbaena]

Any forecast of when it will be fixed?

[sudharsanmit]

Any estimate of a fix? Just Stuck with it!

[tonyawad88]

Any update on this? I have the same issue. The "disabled" tag which I am guessing should act the same as readonly is not working.

<ion-input type="text" [(ngModel)]="lastName" placeholder="Cognome" [disabled]="!isModificationEnabled"></ion-input>

[brandyscarney]

@tonyawad88 Can you take a look at my comment here: https://github.com/driftyco/ionic/issues/10095#issuecomment-274216973

disabled should be getting passed down now. Please let me know on that issue if it still doesn't work for you. :)

For this issue, submitted a PR here: https://github.com/driftyco/ionic/pull/10120

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