Disable/Enable of ion-input using angular reactive forms

Ionic Framework ionic-v3
1

Hello 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 its 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.Can somebody please tell is there something i am missing.I have made a demo example here:https://stackblitz.com/edit/ionic-nl1hi3?file=pages%2Fhome%2Fhome.html

2

-> You can use the disabled property:

<ion-input [disabled]="!isValid" ... ></ion-input>

But you should probably be using Angular’s built-in validators, like Validators.required and Validators.pattern().

See: https://robferguson.org/blog/2017/11/19/ionic-3-and-forms/

3

Thank you,i tried disabled attribute on ion-input like this

<ion-input [formcontrol]="name" [disabled]="name.disabled " ></ion-input>

The code works… Is this an issue which ionic guys need to fix or it is intended to work like this only

4

I mean when developing web app i didnot worry about the disabled attribute on input elements because the angular framework used to take care of that. Now this seems to be an extra work for me to set disabled attribute on input elements in ionic.