How to disable ion-input?

Ionic Framework ionic-v3
1

Just want to know if it is possible to disable the ion-input? I tried to put “disabled” and I was still able to enter text

Thanks

4 Likes
2

[Disabled]=“expression”

Where expression is whatever you want it to be.

https://angular.io/docs/ts/latest/guide/forms.html

3 Likes
3

Ideally you would be able to place the disabled attribute on ion-input and it would pass it down to the input element, but we’re not currently passing that attribute down. Created an issue:

6 Likes
4

It works with static values but it doesn’t adding disabled attribute dynamically such as:

<ion-input [disabled]="isDisabled ? '' : null">

5

Hi there ,

Is disable attribute working till now? I dont know why my code is not working.

  <ion-item>       
           <ion-label stacked>Property Type</ion-label>
               <ion-select [(ngModel)]="propType" (ionChange)="ionChanger()" disabled="false" >
                   <ion-option value="{{ptype}}" *ngFor="let ptype of PropTypeArray">{{ptype}}</ion-option>                 
               </ion-select>
       </ion-item>

I want to trigger disabled attribute in my ts code. but still not working.

<ion-select [(ngModel)]="propType" (ionChange)="ionChanger()" disabled="myEnableTsPars" >
6

I tried disabling the ion-input and it’s working, but the opacity of the disabled style is not passed to the child tags, so the appearance of the ion-input does not change, even with the disabled attribute working.

1 Like
7

please edit your answer: [disabled]=“expression” - lowercase ‘d’

Blockquote Can’t bind to ‘Disabled’ since it isn’t a known property of ‘ion-input’.

3 Likes
8

Good catch. Maybe it was because I posted that from my cellphonse. I tried to edit the message but I can’t :confused:

1 Like
9

Though [disabled] seems to be working now, angular shows an warning about it if using reactive forms. I used [readonly] then, like:

<ion-item class="order__status-comments">
  <ion-label floating>Observação</ion-label>
  <ion-input formControlName="comments" [readonly]="status_loading" type="text"></ion-input>
</ion-item>

And then (at SCSS):

.text-input[readonly] {
  color: #ccc;
  pointer-events: none;
  touch-action: none;
}
10

The point of that warning is that you’re supposed to call enabled() and disabled() directly from the controller, instead of mixing it up with change detection. Instead of switching to another attribute and manually trying to emulate the styling, I would just do this:

 <form [formGroup]="rform">
    <ion-item>
      <ion-label>enabler</ion-label>
      <ion-checkbox formControlName="enabler"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>fruit</ion-label>
      <ion-input formControlName="fruit"></ion-input>
    </ion-item>
  </form>

  rform: FormGroup;

  constructor(fb: FormBuilder) {
    let enabler = new FormControl();
    let fruitctl = new FormControl();
    fruitctl.disable();
    this.rform = fb.group({
      "enabler": enabler,
      "fruit": fruitctl,
    });
    enabler.valueChanges.subscribe(enabledp => {
      if (enabledp) {
        fruitctl.enable();
      } else {
        fruitctl.disable();
      }
    });
  }
11

Hi there. I tried something similar (disabling a whole FormGroup with two FormControl inside) and also tried disabling each FormControl separately but somehow <ion-select> was being disabled properly but <ion-input> not, also showing a touched error if clicked while they were disabled temporarily, so I “solved” the way I showed up there. I wish your suggestion had worked here too. =/

12

bro where is the button

13

If you need a solution, without using formGroup, here’s my solution:

SCSS

[...]

& form {

	&.disable-form {

		opacity: .4;
		pointer-events: none;
		touch-action: none;
	}
}

[...]

MARKUP

<form 
	#myForm="ngForm"
	(ngSubmit)="this.doMyForm();"
	[ngClass]="this.isFormLoading ? 'disable-form' : ''"> [...] </form>

Typescript

    /**
	 * @var {boolean} isFormLoading Reflects, whether a form is loading data or not.
	 */
	protected isFormLaoding: boolean = false;

	[...]

	/**
	 * @protected
	 * @function doMyForm
	 * @description Just a sample function for Ionic Forum
	 * @return {void}
	 */
	protected doMyForm(): void {

		this.isFormLoading = true;

		this.callSomeAPI().then(() => {

			this.isFormLoading = false;

			console.log('success');
			return;
		}).catch((error: Error) => {
			console.error(error);
			return;
		});
		return;
	}

The styling opacity: .4; is also used by Ionic itself. pointer-events: none; and touch-action: none; prevents, that a user can interact with your form elements like <ion-input>, <button>, etc…

Hope it helps someone.

Cheers
Unkn0wn0x

14

or u can use structural directive
<ion-input [disabled]=“condition” value=“Text 2”>

in the file ts specifify your condition and your button will be disabled only when that condition is true
Hope this will help.

15

<ion-input [disabled]=“condition” value=“Text 2”>