web-dev-qa-db-fra.com

angular2 soumettre le formulaire en appuyant sur Entrée sans le bouton d'envoi

Est-il possible de soumettre un formulaire sans bouton d'envoi (en appuyant sur Entrée), par exemple:

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form
formsangularsubmit
83
Florence

peut-être que vous ajoutez keypress ou keydown aux champs de saisie et affectez l'événement pour fonctionner qui fera la soumission quand on clique sur entrer

votre modèle ressemblerait à ceci

<form (keydown)="keyDownFunction($event)">
  <input type="text" />
</form

Et vous travaillez dans votre classe ressemblerait à ceci

keyDownFunction(event) {
  if(event.keyCode == 13) {
    alert('you just clicked enter');
    // rest of your code
  }
}
66
Khaled Al-Ansari

Vous pouvez également ajouter (keyup.enter)="xxxx()"

173
sizzle

Modifier: 

  <form (submit)="submit()" >
    <input />
    <button type="submit" style="display:none">hidden submit</button>
  </form>

Pour utiliser cette méthode, vous devez avoir un bouton d'envoi même s'il n'est pas affiché "Merci pour réponse de la boîte à outils "

Ancienne réponse:

Oui, exactement comme vous l'avez écrit, sauf que le nom de l'événement est (submit) au lieu de (ngSubmit):

<form [ngFormModel]="xxx" (submit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form>
76
Abdulrahman

Je préfère (keydown.enter)="mySubmit()" car il n'y aura pas de saut de ligne si le curseur se trouvait quelque part dans un <textarea> mais pas à la fin.

28
Martin Schneider

Cette façon est beaucoup simple ...

<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">

</form>
22
Clayton K. N. Passos

Utilisez toujours keydown.enter au lieu de keyup.enter pour éviter les retards.

<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>

et fonction à l'intérieur de composant.ts

 textValue : string = '';  
 sendMessage() {
    console.log(this.textValue);
    this.textValue = '';
  }
7
Shamsul

Ajoutez simplement (keyup.enter)="yourFunction()"

6
Saurabh Agrawal

l'ajout d'un bouton d'envoi invisible fait l'affaire

<input type="submit" style="display: none;">

6
Toolkit

Espérons que cela puisse aider quelqu'un: pour une raison quelconque, je ne pourrais pas suivre à cause du manque de temps, si vous avez un formulaire du type:

<form (ngSubmit)="doSubmit($event)">
  <button (click)="clearForm()">Clear</button>
  <button type="submit">Submit</button>
</form>

lorsque vous appuyez sur la touche Enter, la fonction clearForm est appelée, même si le comportement attendu était d'appeler la fonction doSubmit. Changer le bouton Clear en une balise <a> a résolu le problème pour moi. J'aimerais quand même savoir si c'est prévu ou pas. Semble déroutant pour moi

4
Andrea Gherardi

ajoutez ceci dans votre tag d'entrée

<input type="text" (keyup.enter)="yourMethod()" />
1
Abdus Salam Azad

Si vous voulez inclure les deux - acceptez les entrées et acceptez les clics, alors faites -

 <div class="form-group">
    <input class="form-control"   type="text" 
    name="search" placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  
           (keyup.enter)="searchByText(filterdata)">
  <button type="submit"  
          (click)="searchByText(filterdata)" >

  </div>
1
user9630712

Si vous voulez inclure les deux plus simple que ce que j'ai vu ici, vous pouvez le faire simplement en incluant votre bouton à l'intérieur du formulaire.

Exemple avec une fonction d'envoi de message:

                <form>
                    <mat-form-field> <!-- In my case I'm using material design -->
                        <input matInput #message maxlength="256" placeholder="Message">
                    </mat-form-field>
                    <button (click)="addMessage(message.value)">Send message
                    </button>
                </form>

Vous pouvez choisir entre cliquer sur le bouton ou appuyer sur la touche Entrée.

0
Curse