angular2 soumettre le formulaire en appuyant sur Entrée sans bouton Soumettre


100

Est-il possible de soumettre un formulaire qui n'a pas de bouton d'envoi (en appuyant sur Entrée) exemple:

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

Réponses:


77

peut-être que vous ajoutez keypressou keydownaux champs de saisie et attribuez l'événement à la fonction qui effectuera la soumission lorsque vous cliquerez sur Entrée

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 pressed the enter key');
    // rest of your code
  }
}

207

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


Cela fonctionne très bien si vous avez juste une ancienne fonction que vous souhaitez appeler au lieu d'un gestionnaire de soumission
Scott R. Frost

3
Cette approche a été mentionnée sur les documents Angular. angular.io/docs/ts/latest/guide/…
trungk18

C'est la seule façon dont cela fonctionne dans ma situation, merci!
switch87

5
Cela devrait être la réponse acceptée. L'élégance que peut atteindre Angular. Brillant.
Scott Byers

Nouvelle mention dans la documentation Angular: angular.io/guide/user-input#key-event-filtering-with-keyenter
Rafael Neto

84

Éditer:

  <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 la réponse de Toolkit "

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>


2
pouvez-vous s'il vous plaît fournir un plunker? parce que ça ne marche pas
Boîte à outils

Utilisez "visibilité: caché;" au lieu. Le "display: none;" travaillé en chrome, mais pas en safari.
Moulde

Cela devrait être utilisé, sauf que le bouton d'envoi ne doit pas être masqué mais visible car certaines personnes chercheront ce bouton et ne prendront pas la peine d'appuyer sur Entrée.
Impulse The Fox le

31

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


1
Cela devrait être la solution acceptée - beaucoup plus propre
rhysclay

30

Cette façon est bien simple ...

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

</form>

2
Merci, c'est plus facile quand je m'y attendais. Résolu comme ceci: <input type = "text" class = "form-control" [(ngModel)] = "object.LanguageTableData" (blur) = "mymethod ()" (keyup.enter) = "mymethod ()" / >
Loutocký

1
beaucoup plus facile de cette façon plutôt que d'envoyer une fonction avec $ event. Je vous remercie!
Helen

1
beaucoup mieux. pas de boutons cachés ou js.
Voie

Dû faire comme ceci: <form # f = "ngForm" (keyup.enter) = "appendSigBlock (f.value)"> en utilisant Angular 9, mais fonctionne très bien.
Jordanie le

10

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 component.ts

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

10

ajoutez ceci dans votre balise d'entrée

<input type="text" (keyup.enter)="yourMethod()" />

merci frère. Je préfère cette option à la réponse sélectionnée.
Santosh

8
(keyup.enter)="methodname()"

cela devrait fonctionner et déjà mentionné dans de nombreuses réponses, mais cela devrait être présent sur la balise de formulaire et non sur le bouton.


7

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

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


Utilisez "visibilité: caché;" au lieu. Ce qui précède a fonctionné en chrome, mais pas en safari.
Moulde


4

J'espère que cela peut aider quelqu'un: pour une raison quelconque, je n'ai pas pu suivre à cause du manque de temps, si vous avez un formulaire comme:

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

lorsque vous appuyez sur le Enterbouton, la clearFormfonction est appelée, même si le comportement attendu était d'appeler la doSubmitfonction. Changer le Clearbouton en <a>tag a résolu le problème pour moi. J'aimerais toujours savoir si c'est prévu ou non. Cela me semble déroutant


8
pour éviter cela, vous avez spécifié type = "button" pour le bouton Effacer
radio_head

3

Si vous souhaitez inclure les deux plus simples que ce que j'ai vu ici, vous pouvez le faire simplement en incluant votre bouton dans le formulaire.

Exemple avec une fonction envoyant un 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.


J'ai dû l'utiliser en combinaison avec la réponse @Clayton KN Passos et a très bien fonctionné!
Jordanie le

1

Si vous voulez inclure les deux - accepter lors de l'entrée et accepter sur cliquer puis faire -

 <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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.