Why input value is empty after reset?

Question

I have reference to input element:

  @ViewChild("inputSearch", {
    static: false
  })

Template is:

<input tabindex="0" type="text" (keydown)="keydownInputSearch($event)" #inputSearch autocomplete="off" autofocus />
<div class="searchWrapperBtn" (click)="reset()"></div>

Where reset is:

 public reset(): void {
    this.inputSearch.nativeElement.value = "";
  }

Why after reset() input value it is empty in input element but present in {{inputSearch.value}}

Why are you directly interacting with the DOM when you have Angular data binding? — Kurt Hamilton
– Kurt Hamilton, Commented Feb 21, 2020 at 15:45
@OPV you can use template-driven and reactive-from both. — Abhishek
– Abhishek, Commented Feb 21, 2020 at 16:37

BELLIL · Accepted Answer · 2020-02-21 17:05:13Z

1

You are not calling view child properly, you chould do this

 @ViewChild('inputSearch', { static: false}) inputSearch: ElementRef;

Please take a look at this stackblitz

answered Feb 21, 2020 at 17:05

BELLIL

76510 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Why input value is empty after reset?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related