wake-up-neo.net

eckig2 Formular abschicken durch Drücken der Eingabetaste ohne Senden-Schaltfläche

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

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

vielleicht fügen Sie keypress oder keydown zu den Eingabefeldern hinzu und weisen das Ereignis der Funktion zu, die die Übermittlung durch Klicken auf die Eingabetaste vornimmt

ihre Vorlage würde so aussehen

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

Und Sie arbeiten in Ihrer Klasse so

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

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

173
sizzle

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 Schaltfläche zum Senden, auch wenn diese nicht angezeigt wird. "Danke für Antwort des Toolkits "

Alte Antwort:

Ja, genau so, wie Sie es geschrieben haben, außer der Ereignisname ist (submit) anstatt (ngSubmit):

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

Ich bevorzuge (keydown.enter)="mySubmit()", Da kein Zeilenumbruch eingefügt wird, wenn sich der Cursor irgendwo innerhalb eines <textarea> Befand, aber nicht an dessen Ende.

28
Martin Schneider

Dieser Weg ist sehr einfach ...

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

</form>
22
Clayton K. N. Passos

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

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

und Funktion in component.ts

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

Füge einfach (keyup.enter)="yourFunction()" Hinzu

6
Saurabh Agrawal

hinzufügen einer unsichtbaren Senden-Schaltfläche macht den Trick

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

6
Toolkit

Hoffentlich kann dies jemandem helfen: Aus irgendeinem Grund konnte ich aus Zeitgründen 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 auf die Schaltfläche Enter klicken, wird die Funktion clearForm aufgerufen, obwohl das erwartete Verhalten darin bestand, die Funktion doSubmit aufzurufen. Ändern der Schaltfläche Clear 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. Kommt mir verwirrend vor

4
Andrea Gherardi

fügen Sie dies in Ihr Eingabe-Tag ein

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

Wenn Sie beides einschließen möchten - Akzeptieren bei Eingabe und Akzeptieren bei Klick, dann machen 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>
1
user9630712

Wenn Sie beide einfacher als das, was ich hier gesehen habe, einschließen 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.

0
Curse