CODEWITHSUNDEEP
angularformsngmodelangular2-ngmodel
user3794740
user3794740

Reputation: 332

Changing value bind to ng-model doesn't change the value on the input text

I have an input text box which use ngModel bind to a variable inside the component class. Upon clicking a button I want to clear the input text, however changing the variable value doesn't change the input text.

I have re-assign the variable and call detectChanges() from ChangeDetectorRef, but it still doesn't work.

This is the template that I have

<form #beaconForm="ngForm" autocomplete="off">
        <input #searchBox
               id="search-query"
               name="search-query"
               [ngModel]="inputValue"
               (ngModelChange)="searchAutocomplete($event)"
               (keydown)="onKeyDown($event, searchBox)"
               (blur)="onBlur()"
               (focus)="onFocused(searchBox.value)">
        <button color="accent" mat-mini-fab (click)="action(searchBox.value)"><mat-icon>add</mat-icon></button>
</form>

Then on clicking action I want to do

private inputValue: string = "";

action(value) {
      this.inputValue = "";
      this.cd.detectChanges();
  }

I'm expecting this to clear the input, but it doesn't. Any idea where's my mistake?

Upvotes: 1

Views: 14980

Answers (4)

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

It should be [(ngModel)]="inputValue" if you want two-way data binding. [ngModel] works fine for one-way data binding.

Try changing the code as:

<form #beaconForm="ngForm" autocomplete="off">
        <input #searchBox id="search-query" name="search-query"
                  \/\/
            [(ngModel)]="inputValue"
            (ngModelChange)="searchAutocomplete($event)"
            (keydown)="onKeyDown($event, searchBox)"
            (blur)="onBlur()"
            (focus)="onFocused(searchBox.value)" >
        <button color="accent" mat-mini-fab (click)="action(searchBox.value)"> 
           <mat-icon>add</mat-icon>
        </button>
</form>

Stackblitz

Upvotes: 5

Ashish Ranjan
Ashish Ranjan

Reputation: 12950

After your comment I understand, why your doesn't work with one way binding.

Lets start with inputValue = 1111

On button click, which triggers action() method call, we set inputValue to ''. Now whenever we change value in the input box directly, the value of the inputValue variable doesn't change since its one way variable bind. So now the value of inputValue stays as '' even if the input box has some value in it. When we call action() it sets it back to ''. But wait it was already '', so the view doesn't need to be updated (even doing a manual change detection won't work because angular will not see any change).

To fix your issue, either you can use, [(ngModel)] as suggested by everyone. If you want to try out, you can still use [ngModel] but just update the value of the variable on input change.

Something like:

searchAutocomplete(e) {
  this.inputValue = e
  // rest of the code
}

But this is just for a clear understanding, we don't need this workaround if two way binding can solve the issue.

https://stackblitz.com/edit/angular-rcdty6?file=src%2Fapp%2Fapp.component.html

Upvotes: 1

J. Knabenschuh
J. Knabenschuh

Reputation: 765

See the following working version: https://stackblitz.com/edit/angular-cqpqjj

ts

  inputValue: string = "";

  action(value) {
      this.inputValue = "";
    }

html

<form #beaconForm="ngForm" autocomplete="off">
        <input #searchBox
               id="search-query"
               name="search-query"
               [(ngModel)]="inputValue">
        <button color="accent" mat-mini-fab (click)="action(searchBox.value)">add</button>
</form>
<span>#{{inputValue}}#</span>

Upvotes: 0

Syed Kashif
Syed Kashif

Reputation: 422

Try this.

[(ngModel)]={{inputValue}}

Upvotes: -1

Related Questions