1

I'm trying to have a button clear a text input element in Angular 6.

<input #gf type="text" (input)="dt.filterGlobal($event.target.value, 'contains')">
<button (click)="gf.value = '';"></button>

In the markup above I have an input of type text that calls a filterGlobal method when data is entered into the input. Below that is a button that clears the value of the input when clicked. When clicke, the text disappears from the input but the input element's input event doesn't get triggered and therefore the filterGlobal method doesn't get called. Is there something wrong there? I would think changing the model's value would cause an input event to be triggered.

But if nothing is wrong, how can I fire the trigger from the button's click event? I could do this if I absolutely had to:

<button (click)="gf.value = ''; dt.filterGlobal($event.target.value, 'contains')"></button>

But now I'm duplicating code and if someone changes that input event handler without updating the click event handler...

Improve this question
4
  • Why don't you use the reactive form support of angular, bind the input to a form control, react to value changes, and simply change the form control value when clicking the button? stackblitz.com/edit/… Commented Dec 10, 2018 at 18:42
  • @JBNizet Is there no way I can just trigger the input element's input event from the button's click event handler after I set the gf.value? Commented Dec 10, 2018 at 19:39
  • 1
    There must be a way, but that's dirty, and not the way angular is designed to be used. The model is the point of truth. The view depends on the model. Commented Dec 10, 2018 at 19:41
  • @JBNizet OK, I decided to heed your advice and bound the input to a form control. It's working. Thanks for the guidance. Commented Dec 11, 2018 at 11:40

1 Answer 1

Reset to default
1

With (input) your function is going to get called only when you input something in the text box. With the button click, the input value would change. But that isn't a result of a user input on the text field. Hence your function won't get called.

If you want to let your function get called in such a scenario, I think you should be binding to the (change) event. This will get called every time there's a change in the input field and you blur from it.

But that won't work if you blur first from the input field and then click the button.

In order to make it work in that case as well, consider calling dt.filterGlobal before doing gf.value but with gf.value instead of $event.target.value.

<input 
  #gf 
  type="text" 
  (input)="dt.filterGlobal($event.target.value, 'contains')">

<button 
  (click)="dt.filterGlobal(gf.value, 'contains'); gf.value = '';">
  Clear
</button>

Here's a Working StackBlitz Sample for your ref.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Neither of those accomplish what I'm after. Switching to the change event doesn't cause the handler to get called without the input receiving the blur. I want the handler to get called every time they enter a character. The second option causes a duplication where the button click handler is reimplementing what the input's input event handler is doing. If someone modifies that input event handler, they have to also change the button click handler. I don't want that. Can I trigger an input event from the button click event handler?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.