How to set ion-searchbar to disabled


#1

Title says it all.

I have a searchbar…

<ion-searchbar
  [(ngModel)]="myInput"
  [showCancelButton]="shouldShowCancel"
  (ionInput)="onInput($event)"
  (ionCancel)="onCancel($event)">
</ion-searchbar>

But want to make it disabled based on a condition.

I have already tried

[disabled]="this.advancedSearchOpen"


Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.2.1
Xcode version: Not installed


#2

Surely this is simple to do…

Does nobody have a solution?


#3

I used [disabled]=disabled in ion-searchbar, and it worked correctly before last update. May be it was a glitch that it worked 'cause it hasnt an attribute “disabled”.
Finally, I made new component that extends Searchbar with one new property - disabled. Realization can be taked from ion-input component. Works fine.


#4

Thanks, seems like it should have an attribute for disabled.


#5

Did you find a way to disable an ion-searchbar ? Can’t believe this is not possible…


#6

I haven’t been active with ionic for a while so there may be an update addressing it but to answer your question I did not find a solution.


#7

I think this is a bug. Searchbars do indeed have a disabled attribute, and binding to it works, in the sense that it does flip from true to false. The problem seems to be that the searchbar component itself isn’t caring.


#8

have u found solution for this ??


#9

Any updates on this?

[disabled]="blockUI"

not work for me.


#10

Any news on this? I’m also having this issue.


#11

Me too!. Have used [disabled] on buttons… So why not searchbar… I know it’s a composite with things like the x to clear…


#12

i use “fieldset”

fieldset disabled=true style=“border : none”

<ion-searchbar *ngIf="disabled == false" #searchbarElem type="text" placeholder="{{guidance | translate}}"  (ionInput)="search($event)" 
    (ionClear)="search($event)" [(ngModel)]="suggestTerm">
</ion-searchbar>

fieldset


#13
constructor(
        private renderer:Renderer) {

    }

    ngOnInit() {
        let input = this.searchBar.getElementRef().nativeElement.querySelector('input');
        this.renderer.setElementAttribute(input, 'disabled', 'true');
    }

Have fun


#14

@mica great solution but getting error,

RROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
    at CampusMapPage.webpackJsonp.442.CampusMapPage.ngOnInit

<ion-searchbar #searchBar placeholder=“Search for a Destination”>

ngOnInit() {
let input = this.searchBar.nativeElement.querySelector(‘input’);
this.renderer.setElementAttribute(input, ‘disabled’, ‘true’);
this.platform.ready().then(() => {
this._init();
});
}

ERROR :interrobang: