Borrar un campo de texto de entrada en Angular2

¿Por qué este método no funciona cuando intento borrar el campo de texto?

<div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
</div>


export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = '';
  }
}

Lo que estoy esperando: ya que estoy pasando una propiedad para el valor de búsqueda, cuando hago clic en el botón, debería obtener el valor actualizado que se procesa en la función clearSearch().

También me di cuenta de que si establezco un valor predeterminado a searchValue, clearSearch() la función funciona, pero solo una vez.

Por favor compruebe mi émbolo .

 27
angular
Author: anothernode, 2017-01-05
Source

5 answers

1. Primer Método

Tiene que asignar una cadena nula o vacía aquí

this.searchValue = null;
//or
this.searchValue = ' ';

Émbolo de Trabajo

Porque no se está disparando ningún evento desde la detección de cambio angular. así que tienes que asignar algún valor ya sea null o string con espacio

2. Segundo Método

  • el uso de [(ngModel)] debería funcionar con ngModel.

¿Por qué ?

Porque como lo hizo el enlace con el atributo value que es solo el enlace de propiedad no enlace de eventos. tan angular no ejecuta la detección de cambios porque no se dispara ningún evento relevante para Angular. Si se enlaza a un evento, Angular ejecuta la detección de cambios y el enlace funciona y el valor debe ser cambios.

Ver ejemplo de trabajo de lo mismo con ngModel

Ejemplo de Trabajo con ngModel

 24
Author: Pardeep Jain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-05 12:09:45

Simplemente puede cambiar la referencia del valor de entrada, como se muestra a continuación

<div>
    <input type="text" placeholder="Search..." #reference>
    <button (click)="reference.value=''">Clear</button>
</div>
 24
Author: sudheer KB,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-16 05:21:52

Método 1.

Usando `ngModel`.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..."  [(ngModel)]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = null;
  }
}

Código del émbolo: Émbolo 1

Método 2.

Usando valor nulo en lugar de comillas vacías.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = null;
  }
}

Código del émbolo: Émbolo 2

 9
Author: kind user,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-05 13:07:45

Hay dos formas adicionales de hacerlo aparte de los dos métodos mencionados en la respuesta de @PradeepJain.

Sugeriría no usar este enfoque y volver a esto solo como último recurso si no está utilizando la directiva [(ngModel)] y tampoco está utilizando el enlace de datos a través de [value]. Lea esto para más información.

Usando ElementRef

App.componente.html

<div>
      <input type="text" #searchInput placeholder="Search...">
      <button (click)="clearSearchInput()">Clear</button>
</div>

App.componente.ts 

export class App {
  @ViewChild('searchInput') searchInput: ElementRef;

  clearSearchInput(){
     this.searchInput.nativeElement.value = '';
  }
}

Utilizando FormGroup

App.componente.html

<form [formGroup]="form">
    <div *ngIf="first.invalid"> Name is too short. </div>
    <input formControlName="first" placeholder="First name">
    <input formControlName="last" placeholder="Last name">
    <button type="submit">Submit</button>
</form>
<button (click)="setValue()">Set preset value</button>
<button (click)="clearInputMethod1()">Clear Input Method 1</button>
<button (click)="clearInputMethod2()">Clear Input Method 2</button>

App.componente.ts 

export class AppComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });
  get first(): any { return this.form.get('first'); }
  get last(): any { return this.form.get('last'); }
  clearInputMethod1() { this.first.reset(); this.last.reset(); }
  clearInputMethod2() { this.form.setValue({first: '', last: ''}); }
  setValue() { this.form.setValue({first: 'Nancy', last: 'Drew'}); }
}

Pruébelo en stackblitz Borrando la entrada en un FormGroup

 2
Author: Aditya Vikas Devarapalli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-28 13:43:00

Debes usar this.searchValue = null

 -1
Author: Saeed Py,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-05 11:41:37