0
275
ViewsAngular - Clear Input text when click on "x"
I have an Input field where user can enter text. I have a x symbol to the left of input field. I am trying to clear text when symbol is clicked but unable to do so. Also input tfFormInput is custom text from npm library
I have tried using ngModel but did not work for me
What should I add in remove method to make it work?
<div class="placeholder"><input tfFormInput />
</div>
<div class="im-target-param-row-delete" (click)="remove()" [(ngModel)]="searchValue">
<div class="close-ctnr">
<svg viewBox="0 0 10 10">
<line x1="1" y1="1" x2="9" y2="9"/>
<line x1="1" y1="9" x2="9" y2="1"/>
</svg>
</div>
</div>
.ts
export class SearchComponent implements OnInit {
searchValue:string = '';
removeSelectedSpecification(){
this.searchValue = '';
}
}
·
Juan Pablo Isaza
3 answers
Answer question0
NgModel should be on input like below.
<div class="placeholder"><input tfFormInput [(ngModel)]="searchValue"/>
</div>
<div class="im-target-param-row-delete" (click)="remove()">
<div class="close-ctnr">
<svg viewBox="0 0 10 10">
<line x1="1" y1="1" x2="9" y2="9"/>
<line x1="1" y1="9" x2="9" y2="1"/>
</svg>
</div>
</div>
remove() { this.searchValue = ''; }
·
Juan Pablo Isaza
Report
0
you could try something like this. move the searchValue to the input element.
@Component({
selector: 'my-app',
template: `
<div>
<input type="text" placeholder="Search..." [(ngModel)]="searchValue">
<button (click)="clearSearch()">Clear</button>
</div>
`,
})
export class App {
searchValue:string = null;
clearSearch() {
this.searchValue = '';
console.log(this.searchValue.length, this.searchValue, typeof(this.searchValue));
}
}
·
Juan Pablo Isaza
Report
0
try like this:
html file:
<div>
<input type="text" placeholder="Search..." [(ngModel)]="searchValue">
<button (click)="remove()">X</button>
</div>
ts file:
export class SearchComponent implements OnInit {
searchValue:string = '';
remove(){
this.searchValue = '';
}
}
·
Juan Pablo Isaza
Report
Answer question