Disable/enable of ion-input using angular reactive forms

Question

I have an Ionic app where I am trying to disable the ion-input using reactive forms some thing like this.

Disable(){
  this.name.disable();
  this.name.updateValueAndValidity();
}

And when I try to enable the input element it's not working

 Enable(){
   this.name.enable();
   this.name.updateValueAndValidatity();
 }

The html code looks like this:

  <ion-item>
     <ion-input type="text" [formControl]="name"></ion-input>
  </ion-item>
  <button ion-button (click)="Disable()">Disable</button>
  <button ion-button (click)="Enable()">Enable</button>

The above code works fine with html5 input element but not with Ionic elements. Is there something I am missing? I have made a demo example here: https://stackblitz.com/edit/ionic-nl1hi3?file=pages%2Fhome%2Fhome.html

halfer · Accepted Answer · 2020-03-04 11:05:10Z

1

I have written a directive which subscribes the form control Status Changes and disables the elements using element reference. I don't whether this is correct approach but rather than writing disabled attribute in my html for every element I think this is good.

Because if Ionic team fixes the bug I can just delete the directive without modifying the html code. This is the link where I have the directive implemented: https://stackblitz.com/edit/ionic-bxfjzs?file=directives%2Fdisable-control.directive.ts

I need this directive for ion-input, ion-textarea and ion-radio elements. For other elements Ionic is handling the enable/disable property correctly.

edited Mar 4, 2020 at 11:05

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jan 2, 2018 at 6:17

abhilash reddy

1,5968 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Melchia Over a year ago

Thank you for sharing your solution. It's better indeed.

Melchia · Accepted Answer · 2018-01-01 08:46:11Z

0

Can you try this ?

<ion-item>
     <ion-input type="text" [formControl]="name" [Disabled]="nameDisabled"></ion-input>
  </ion-item>
  <button ion-button (click)="Disable()">Disable</button>
  <button ion-button (click)="Enable()">Enable</button>

Disable(){
  this.nameDisabled =true;
  this.name.updateValueAndValidity();
}

edited Jan 1, 2018 at 8:46

answered Jan 1, 2018 at 7:44

Melchia

24.6k23 gold badges110 silver badges130 bronze badges

3 Comments

abhilash reddy Over a year ago

Thank you. .i did that but Without adding disabled attribute is there any approach to achieve...is this a bug in ionic or is that intended to work in similar way

Melchia Over a year ago

If you made it work can you please share your experience with us? Post it as an answer it'll be a big help. Thank you

Duannx Over a year ago

@abhilashreddy I think this is the only way to achieve your goal with ion-input

Collectives™ on Stack Overflow

Disable/enable of ion-input using angular reactive forms

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related