Ionic 2 clearInput Attribute


Is anyone having trouble with the clearInput Attribute? According to the docs the attribute is suppose to go on the ion-item tag which doesn’t seem to work. Although putting on the ion-input seems to works as far as that it appears, but all it seems to do is try and submit the forum. Is there something more I would have to do to use this feature properly? thanks you in advanced.


I’m having the same problem - I specify the clearInput attribute on the ion-input element and a button appears but clicking on this button does not actually clear the input!


Furthermore the usage specified in the source code is as follows:

<ion-item clearInput> <ion-input placeholder="Username"></ion-input> </ion-item>

look where they have put the attribution on the ion-item element!

Please shed some light on this ionic! And a workaround would be nice too - if there is one…


Well I was poking around in the ionic code and it found out that clearTextInput() {} function in the input-base script file. I added a simple this._value = ‘’ and then it worked. Although the problem is that if you updated Ionic the change would be erased.


I don’t if is a bug or just unfinished, because the function is already there. As far as it being fixed in a future release, think should put that in along with put a type=“button” on the button in the template. It would simple enough.


Hi, can you put a little code? I don’t understand how turn it on.


In the input-base.js file at line 340.

InputBase.prototype.clearTextInput = function () { void 0; this._value = ''; };

In input.js file at line 100.
core_1.Component({ selector: 'ion-input', template: '<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' + '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' + '<button clear *ngIf="clearInput && value" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' + '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>', directives: [ common_1.NgIf, native_input_1.NextInput, native_input_1.NativeInput, button_1.Button ], encapsulation: core_1.ViewEncapsulation.None, }),


Ah, so I need overwrite the bugged clearTextInput method. Thank you.


This doesn’t work at beta7. Now it is moved to TextInput class which extend InputBase.

export declare class TextInput extends InputBase {
    constructor(config: Config, form: Form, item: Item, app: IonicApp, platform: Platform, elementRef: ElementRef, scrollView: Content, nav: NavController, ngControl: NgControl);
     * @private
    inputBlurred(event: any): void;
     * @private
    inputFocused(event: any): void;
     * @private
    clearTextInput(): void;

Default implementation looks ok:

     * @private
    TextInput.prototype.clearTextInput = function () {
        void 0;
        this._value = '';

Here is commit where functionality has been added:

Anyone facing issue with this in beta7 ?


I thin they built the fix into beta 7 because it is working just fr me without changing anything. So it should work be default, although the button doesn’t appear until the corresponding field has left focus.


In my case all input fields are already pre-filled with values from model.
Even if I use empty input without any value, type something, change focus, return - doesn’t work :frowning: