How to identify if ion-input value has been cleared?

I have an ion-input that populate a variable. when the user click on clear button I need to clear that variable.
I don’t know how to understand when the user clear the button. how is it possible to do that?

1 Like
  1. What framework are you using?
  2. Show us some Code about what you do at the moment to “attach” the variable to the Input
1 Like

I have an ion-input that populate a variable. when the user click on clear button I need to clear that variable. I don’t know how to understand when the user clear the button. how is it possible to do that?

I use Ionic + Stenciljs without a framework

This is my button code (is not a part of a form)

 <ion-input
                clear-input
                name="password"
                type="password"
                placeholder={i18n("Password")}
                class="selected_password"
                required
                onInput={(event) => this.handleChange(event)}>
            </ion-input>

The only way that I have found as a workaround is to listen to all ionchange events and check if the value it’s empty or not. It’s really annoying that there isn’t an event as ionClear or something else to deal with this.

I wonder if a onclear event exists at all for html input - as reference

Nevertheless using rxjs one could easily use a filter to have sonethibg done when input change is clear

1 Like

I think it’s worth at least mentioning that this class of problem - “how do I pass information back and forth from my presentation layer to my business logic layer” - is arguably the single most fundamental task of any web application framework.

JavaScript wasn’t designed for this. Frankly, JavaScript was barely “designed”, period.

I get that frameworks have learning curves. I get that people are paranoid about choosing the “wrong” framework, and fear that in six months there will be some other framework that all the cool kids are flocking to.

In the end, though, you’re either using a framework, or you’re effectively writing your own. Why wouldn’t you want to take advantage of all the millions of hours that have gone into making and refining one?

1 Like

I honestly don’t understand the relevance of the answer. I asked if there is any way to do something beyond the workaround I found. Since ionic exposes an attribute for fundamental functionality for an input field, I expected it to be handled comprehensively with a dedicated event.
I know that no dedicated event is indicated in the documentation, however, several times even by the moderators themselves I was told that the documentation is not always up to date, so I wanted confirmation.

At the moment I don’t use a framework just because I wanted to try an “agnostic” approach. I’m not afraid to focus.

1 Like

Lots of people come to forums like this and read through threads to make decisions about which way to proceed when learning a new bit of a technology stack. So I try to comment not only to the people directly involved in the thread, but also for readers who stumble across the thread later.

If I was one of those people, who was trying to decide which of Ionic’s supported frameworks to invest time learning, I would want them to see your situation and understand that this is the sort of thing that bothering to learn a framework buys me.

So if that person turns out to be you, great. But I’d also consider it a useful comment if it was somebody else two months from now, and that’s why I made it.

From your answer I understand that using a framework solve this problem. So if I use angular or vue can I use a method from Ionic to detect when the clear icon it’s clicked?
Because if there is something like that I understand what you mean, otherwise using a framework or none it’s the same for this issue.
Have I understand correctly?
Maybe I’m missing the point.

I can only speak for Angular, although I expect something equivalent can be done easily in either React or Vue.

If you look at the source of the component (look down towards the bottom), you’ll see how “the clear button” is implemented. I can see two fairly straightforward options here:

First, you could make your own “clear” button using similar markup, at which point you could capture whatever events you wish.

What I would actually do follows.

Your OP asked:

The point of using a framework here is that it gets at the core of what you really want to do - connect a user click on “the clear button” to “set something in my controller code”. That doesn’t require an ionClear event, or, in fact, you doing anything in response to clicks on “the clear button” (I keep putting it in quotes to indicate that it’s likely just a bit of a distraction - my understanding is that what you are really trying to do is what Angular calls “two-way binding”, which is a broader topic than a single button that clears an input control).

<ion-input clear-input [(ngModel)]="password" ...>
<ion-input clear-input [formControl]="passwordControl" ...>

Either one of those options would simply Do What You Want, as I understand it. When the user clicks the clear button, in the first case, the framework will automatically set the password property of your component controller to the empty string. In the second case, the passwordControl FormControl in your component controller has its value change similarly (to an empty string).

Now, if you need to do something else when passwordControl becomes empty for whatever reason (here’s why I think “the clear button” isn’t front and center here - maybe the user hit backspace twenty times and now the field is empty; we still presumably want to do whatever this thing is), FormControls expose a valueChanges Observable that will emit on each value change. You could subscribe to that.

You could achieve the same effect with a setter on the property bound by ngModel, but the reactive form method (with the FormControl) also gives you fairly easy-to-use validation features, helping you make a “password strength” indicator or a bunch of hints if the password is too short or fails some dictionary check or whatever.

Undestood your answer.
It’s similar than using

@Listen("ionChange")
  handleDelete(event)

infact this is how I achieve this goal.

fortunately, as I said, I was able to found a workaround, but I think that sholuld be handled better from ionic and not the framework (a dedicated event would be perfect).

I don’t see how that would be conceivable.

Ionic attempts to play nicely with many different frameworks, each of which has its own event dispatch system. In fact, Ionic used to have its own Events system. Let’s just say that I at least did not shed a single tear when it vanished below the horizon.

this is what I’m saying from the beginning. An “event” dedicated to the click of the user on the X button would be great.

1 Like

There is an option I found in ionic 7 → (ionClear)=“hideElement()”

You can write the business logic in hideElement function.

Thanks