Angular2-Formular senden durch Drücken der Eingabetaste ohne Senden-Taste

Ist es möglich, ein Formular ohne Senden-Schaltfläche (durch Drücken der Eingabetaste) zu senden? Beispiel:

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

Vielleicht fügen Sie keypressoder keydownzu den Eingabefeldern hinzu und weisen das Ereignis der Funktion zu, die das Senden durch Klicken auf die Eingabetaste ausführt

Ihre Vorlage würde so aussehen

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

Und Sie funktionieren innerhalb Ihrer Klasse würde so aussehen

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

Sie können auch hinzufügen (keyup.enter)="xxxx()"

Bearbeiten:

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

Um diese Methode verwenden zu können, benötigen Sie eine Senden-Schaltfläche, auch wenn nicht "Danke für die Antwort von Toolkit " angezeigt wird.

Alte Antwort:

Ja, genau so, wie Sie es geschrieben haben, außer dass der Ereignisname (submit)anstelle von (ngSubmit):

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

Ich bevorzuge, (keydown.enter)="mySubmit()"weil kein Zeilenumbruch hinzugefügt wird, wenn sich der Cursor irgendwo innerhalb von a befindet, <textarea>aber nicht am Ende.

Dieser Weg ist sehr einfach ...

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

</form>

Verwenden Sie immer keydown.enter anstelle von keyup.enter, um Verzögerungen zu vermeiden.

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

und Funktion innerhalb der Komponente.ts

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

Fügen Sie dies in Ihr Eingabe-Tag ein

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

Das Hinzufügen einer unsichtbaren Schaltfläche zum Senden reicht aus

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

Einfach hinzufügen (keyup.enter)="yourFunction()"

(keyup.enter)="methodname()"

Dies sollte funktionieren und bereits in vielen Antworten erwähnt, sollte jedoch auf dem Formular-Tag und nicht auf der Schaltfläche vorhanden sein.

Hoffentlich kann dies jemandem helfen: Aus irgendeinem Grund konnte ich aus Zeitmangel nicht nachverfolgen, wenn Sie ein Formular wie das folgende haben:

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

Wenn Sie die EnterTaste drücken, wird die clearFormFunktion aufgerufen, obwohl das erwartete Verhalten darin bestand, die doSubmitFunktion aufzurufen . Das Ändern der ClearSchaltfläche in ein <a>Tag hat das Problem für mich gelöst. Ich würde immer noch gerne wissen, ob das erwartet wird oder nicht. Scheint mir verwirrend

Wenn Sie beide einschließen möchten - akzeptieren Sie bei der Eingabe und akzeptieren Sie beim Klicken, dann tun Sie -

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

Wenn Sie beide einfacher als das, was ich hier gesehen habe, einfügen möchten , können Sie dies einfach tun, indem Sie Ihre Schaltfläche in das Formular einfügen.

Beispiel mit einer Funktion, die eine Nachricht sendet:

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

Sie können wählen, ob Sie auf die Schaltfläche klicken oder die Eingabetaste drücken möchten.