Disable/enable form

[loopezz]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Disableing a FormGroup or FormControl doesn't update the input fields immediately with a disabled attribute. This attribute will be added after the user clicks on that specific input field. However, after re-enableing the FormGroup or FormControl the disabled attribute doesn't get removed.

Expected behavior:
Disableing and re-enabling should toggle the disabled attribute immediately on all targeted input fields.

Steps to reproduce:

1. Try type something while the form is enabled
2. Disable the form
3. Try type something while the form is disabled
4. You will now see the specific input field gets a disabled attribute
5. Re-enable the form
6. Try type something in the same input field while the form is back enabled
7. You will now see the specific input field still has a disabled attribute

! Untouched input fields won't be affected !

Related code:
http://plnkr.co/edit/FIU9rnog5x7u6sCzNeef?p=preview

insert short code snippets here

Other information:

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

insert the output from ionic info here

[loopezz]

Is there a hack to fix this temporary? I think this is quite mandatory with the following use case:

• Disable the complete form when the user confirms the values are complete and may not be changed after that

Thanks in advance!

[kensodemann]

I guess I could think of a couple of hacks to try for this particular use case:

1. Disable the individual controls in the form rather than the whole form
2. In the HTML, have two different "views" of the data, one a form for entry and one a bunch of stylized divs (or disabled read-only controls, or whatever), and control which is actually shown via *ngIfs
3. Similar to number 2, but two completely separate routes depending on state

Were it my app, I would probably start with number 1 and see how it went since keeping a list of controls around when using form builder is pretty easy to do.

[loopezz]

Unfortunately, option 1 is a no go, because it will have the same behavior as disableing/re-enableing the whole form. Option 2 and 3 are a bit too complex and requires more maintenance if you have multiple pages with the same form (pushed as parameter; form values must still be viewed).

What’s your opinion about looping through the formgroup, check for the disabled state and manually add/remove it from the input fields?

[emmawi]

I have the same issue. Disabling individual controls does not work. I did a very ugly hack and removed the disabled attribute "manually" .
(https://plnkr.co/edit/7KS45YvivpW0ciGRUbD2?p=preview)

[loopezz]

Related issue https://github.com/ionic-team/ionic/issues/12359

---

Still the same behavior with ionic-angular 3.9.2 and angular 5.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!