angular2 invia il modulo premendo invio senza il pulsante di invio

È possibile inviare un modulo che non ha il pulsante di invio (premendo invio) esempio:

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

magari aggiungi keypresso keydownai campi di input e assegni l'evento alla funzione che farà l'invio quando si fa clic su Invio

il tuo modello sarebbe simile a questo

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

E tu funzioni all'interno della tua classe sarebbe simile a questo

keyDownFunction(event) {
  if (event.keyCode === 13) {
    alert('you just pressed the enter key');
    // rest of your code
  }
}

Puoi anche aggiungere (keyup.enter)="xxxx()"

Modificare:

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

Per utilizzare questo metodo, è necessario disporre di un pulsante di invio anche se non viene visualizzato "Grazie per la risposta di Toolkit "

Vecchia risposta:

Sì, esattamente come l'hai scritto, tranne che il nome dell'evento è (submit)invece di (ngSubmit):

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

Preferisco (keydown.enter)="mySubmit()"perché non verrà aggiunta un'interruzione di riga se il cursore si trova da qualche parte all'interno di un <textarea>ma non alla sua fine.

In questo modo è molto semplice ...

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

</form>

Usa sempre keydown.enter invece di keyup.enter per evitare ritardi.

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

e funzione all'interno di component.ts

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

aggiungilo all'interno del tag di input

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

(keyup.enter)="methodname()"

questo dovrebbe funzionare e già menzionato in molte risposte, tuttavia dovrebbe essere presente sul tag del modulo e non sul pulsante.

l'aggiunta di un pulsante di invio invisibile fa il trucco

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

Basta semplicemente aggiungere (keyup.enter)="yourFunction()"

Spero che questo possa aiutare qualcuno: per qualche motivo non sono riuscito a rintracciarlo per mancanza di tempo, se hai un modulo come:

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

quando si Enterpreme il pulsante, la clearFormfunzione viene chiamata, anche se il comportamento previsto era chiamare la doSubmitfunzione. La modifica del Clearpulsante in un <a>tag ha risolto il problema per me. Vorrei ancora sapere se è previsto o no. Mi sembra confuso

Se vuoi includere entrambi più semplici di quello che ho visto qui, puoi farlo semplicemente includendo il tuo pulsante all'interno del modulo.

Esempio con una funzione che invia un messaggio:

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

È possibile scegliere tra fare clic sul pulsante o premere il tasto Invio.

Se vuoi includere entrambi - accetta su invio e accetta al clic, quindi fai -

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