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

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

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

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

É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>

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.

Cette façon est bien simple ...

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

</form>

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 = '';
  }

ajoutez ceci dans votre balise d'entrée

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

(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.

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

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

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

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

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.

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>