Uncheck checkbox on text input & clear text input when checkbox is checked

Question

I have a search bar and check box as so:

<input type="text" placeholder="Search..." (keyup)="onKey()" [(ngModel)]="input">
<input type="checkbox" (click)="clearSearch()" [(ngModel)]="checkbox">View All

Whenever anyone types into the search bar I want the checkbox to become unchecked. Likewise, whenever anyone checks the checkbox, I want the search bar to be cleared.

I've tried the following:

export class App {
 checkbox = ['checked']
 clearSearch() { 
 this.input = '';
};
onKey() { 
 checkbox = ['unchecked']
}

But it obviously doesn't quite work.

Here is a plunker with the above code: https://plnkr.co/edit/uAYxswpoz18jlRUqAMn5?p=preview

Which is the best way to achieve this functionality?

Thanks!

Kasper Ziemianek · Accepted Answer · 2017-07-09 17:53:14Z

2

You were almost there. First of all, I advice You to use boolean values for checkboxes data models. Array evaluates to true so checkbox is still checked. If you reference instance properties, You should reference them by using word this. So the method onKey() should be :

onKey() { 
 this.checkbox = false
}

plunker

answered Jul 9, 2017 at 17:53

Kasper Ziemianek

1,3458 silver badges17 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-07-09 17:56:40Z

1

In your function make this.checkbox to be false.

 <input type="checkbox" (click)="clearSearch()" [(ngModel)]="checkbox">View All

your function

 onKey() { 
     this.checkbox = false;
  }

DEMO

edited Jul 9, 2017 at 17:56

answered Jul 9, 2017 at 17:51

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Uncheck checkbox on text input & clear text input when checkbox is checked

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related