0
284
ViewsAngular - Texto de entrada claro al hacer clic en "x"
Tengo un campo de entrada donde el usuario puede ingresar texto. Tengo un símbolo x a la izquierda del campo de entrada. Estoy tratando de borrar el texto cuando se hace clic en el símbolo, pero no puedo hacerlo. También input tfFormInput es texto personalizado de la biblioteca npm
Intenté usar ngModel pero no funcionó para mí
¿Qué debo agregar en el método de remove para que funcione? 
<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 debe estar en la entrada como se muestra a continuación.
<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
podrías intentar algo como esto. mueva el valor de búsqueda al elemento de entrada.
@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
intenta así:
archivo HTML:
<div> <input type="text" placeholder="Search..." [(ngModel)]="searchValue"> <button (click)="remove()">X</button> </div>archivo ts:
export class SearchComponent implements OnInit { searchValue:string = ''; remove(){ this.searchValue = ''; } }
·
Juan Pablo Isaza
Report
Answer question