Angulaire 6 ajouter une entrée sur la touche Entrée

Question

J'ai un composant appelé text-editor.component et voici mon modèle html:

 <div class="container">

<div id="testo" class="offset-1 text-center" >
  <input type="text" class="col-8 text-center">
 </div>
</div>

Je souhaite ajouter un nouveau texte d'entrée lorsque j'appuie sur la touche Entrée. C'est ce que j'essaye de réaliser:

 <div id="testo" class="offset-1 text-center" >
  <input type="text" class="col-8 text-center">
  <!-- second input -->
  <input type="text" class="col-8 text-center">
 </div>
</div>

lorsque l'utilisateur appuie sur Entrée après avoir saisi du texte dans l'entrée, une nouvelle entrée doit apparaître. J'utilise les formulaires pilotés par modèle d'Angular.

Answer 1

Manette

Déclarez un tableau «entrées» et l'initialise avec une valeur de 1.

 inputs = [1];

Créez une fonction addInput ().

 addInput() {
  this.inputs.push(1);
}

HTML

 <div id="testo" class="offset-1 text-center" *ngFor="let more of inputs">
<input type="text" class="col-8 text-center" (keyup.enter)="addInput()">
</div>

Dans votre modèle, vous appellerez la fonction addInput () chaque fois que vous appuyez sur Entrée (keyup.enter). La fonction pousse une nouvelle valeur dans le tableau, dont la longueur augmente de 1 et qui à son tour crée un nouveau champ d'entrée.

Answer 2

Je vois beaucoup de gens utiliser keyup.enter ou keydown.enter, mais ce qui est le plus approprié est keypress.enter

 <input type="text" [(ngModel)]="reference_num" class="form-control" placeholder="Type Reference number" name="reference_num" (keypress.enter)="search()">