Effacement d'un champ de texte d'entrée dans Angular2

Question

Pourquoi cette méthode ne fonctionne pas lorsque j'essaie d'effacer le champ de texte?

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


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

Ce que j'en attends: depuis que je suis de passage d'une propriété pour la recherche de la valeur, quand je clique sur le bouton, il doit obtenir la valeur mise à jour qui est traitée en clearSearch() fonction.

J'ai aussi remarqué que si je mets une valeur par défaut de searchValue, clearSearch() fonctionne, mais une fois seulement.

Veuillez vérifier mon plunker.

Answer 1

1. Première Méthode

vous devez affecter la valeur null ou une chaîne vide ici

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

Travail Plunker

parce qu'aucun événement est déclenché à partir angulaire de la détection de changement. donc, vous devez affecter une valeur null ou une chaîne avec de l'espace

2. Deuxième Méthode

• l'utilisation d' [(ngModel)] , il devrait fonctionner avec ngModel.

pourquoi ?

parce que comme vous l'avez fait la liaison avec value attribut qui n'est la propriété de liaison pas de liaison d'événement. donc angulaire de ne pas exécuter la détection de changement, car aucun événement relatif à l'Angulaire est déclenché. Si vous liez à un événement puis Angulaire pistes de détection de changement et la liaison des œuvres et de la valeur à des changements.

voir exemple de travail de même avec ngModel

Exemple de travail avec ngModel

Answer 2

Vous pouvez simplement changer la référence de la valeur d'entrée, comme ci-dessous

 <div>
    <input type="text" placeholder="Search..." #reference>
    <button (click)="reference.value=''">Clear</button>
</div>
 

Answer 3

Il y a deux autres façons de le faire en dehors des deux méthodes mentionnées dans @PradeepJain de réponse.

Je suggère de ne pas utiliser cette approche et de revenir à ce qu'en dernier recours, si vous n'êtes pas à l'aide de [(ngModel)] directive, et également à l'aide de la liaison de données via [value]. Lire ceci pour plus d'info.

À L'Aide De ElementRef

app.component.html

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

app.composante.ts

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

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

À L'Aide De FormGroup

app.component.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.composante.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'}); }
}

Essayer sur stackblitz de Compensation de l'entrée dans un FormGroup

Answer 4

Méthode 1.

L'utilisation de `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;
  }
}

Plunker code: Plunker1

La méthode 2.

À l'aide de la valeur null à la place des guillemets vides.

@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;
  }
}

Plunker code: Plunker2

Answer 5

vous devez utiliser this.searchValue = null