angular2 wyślij formularz, naciskając klawisz Enter bez przycisku przesyłania

100

Czy można przesłać formularz, który nie ma przycisku przesyłania (naciskając klawisz Enter) przykład:

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form
Florencja
źródło

Odpowiedzi:

77

być może dodasz keypresslub keydowndo pól wejściowych i przypiszesz zdarzenie do funkcji, która wykona przesłanie po kliknięciu Enter

Twój szablon wyglądałby tak

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

A ty funkcjonujesz w klasie, która wyglądałaby tak

keyDownFunction(event) {
  if (event.keyCode === 13) {
    alert('you just pressed the enter key');
    // rest of your code
  }
}
Khaled Al-Ansari
źródło
206

Możesz także dodać (keyup.enter)="xxxx()"

trzask
źródło
Działa to świetnie, jeśli masz zwykłą starą funkcję, którą chcesz wywołać zamiast procedury obsługi przesyłania
Scott R. Frost
3
To podejście zostało wspomniane w dokumentach Angular. angular.io/docs/ts/latest/guide/…
trungk18
Tylko tak to działa w mojej sytuacji, dzięki!
switch87
5
To powinna być akceptowana odpowiedź. Elegancja w sposób, jaki potrafi osiągnąć Angular. Znakomity.
Scott Byers
Nowa wzmianka w dokumentacji Angulara
Rafael Neto
84

Edytować:

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

Aby skorzystać z tej metody, musisz mieć przycisk przesyłania, nawet jeśli nie jest wyświetlany „Dziękujemy za odpowiedź Toolkit

Stara odpowiedź:

Tak, dokładnie tak, jak to napisałeś, z wyjątkiem tego, że nazwa wydarzenia to (submit)zamiast (ngSubmit):

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

Abdulrahman Alsoghayer
źródło
2
czy możesz podać plunkera? ponieważ to nie działa
Toolkit,
Użyj opcji „widoczność: ukryta”; zamiast. Komunikat „display: none;” pracował w chromie, ale nie w safari.
Moulde,
Należy tego użyć, z wyjątkiem tego, że przycisk przesyłania nie powinien być ukryty, ale widoczny, ponieważ niektórzy ludzie będą szukać tego przycisku i nie zawracają sobie głowy naciśnięciem klawisza Enter.
Impulse The Fox
31

Wolę, (keydown.enter)="mySubmit()"ponieważ nie zostanie dodany podział wiersza, jeśli kursor znajdował się gdzieś w środku, <textarea>ale nie na jego końcu.

Martin Schneider
źródło
1
To powinno być przyjęte rozwiązanie - dużo czystsze
rhysclay
30

Ten sposób jest o wiele prosty ...

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

</form>
Clayton KN Passos
źródło
2
Dziękuję, jest łatwiej, kiedy się spodziewałem. Rozwiązany w ten sposób: <input type = "text" class = "form-control" [(ngModel)] = "object.LanguageTableData" (blur) = "mymethod ()" (keyup.enter) = "mymethod ()" / >
Loutocký
1
o wiele łatwiej w ten sposób niż wysyłanie funkcji z $ event. Dziękuję Ci!
Helen
1
dużo lepiej. żadnych ukrytych przycisków lub js. Czysty kątowy sposób
RenANS
Musiał zrobić tak: <form # f = "ngForm" (keyup.enter) = "appendSigBlock (f.value)"> używając Angular 9, ale działa świetnie.
Jordan
10

Aby uniknąć opóźnień, zawsze używaj keydown.enter zamiast keyup.enter.

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

i działają wewnątrz component.ts

 textValue : string = '';  
 sendMessage() {
    console.log(this.textValue);
    this.textValue = '';
  }
Shamsul
źródło
10

dodaj to wewnątrz swojego tagu wejściowego

<input type="text" (keyup.enter)="yourMethod()" />
Abdus Salam Azad
źródło
dziękuję bracie. Wolę tę opcję od wybranej odpowiedzi.
Santosh
8
(keyup.enter)="methodname()"

powinno to działać i zostało już wspomniane w wielu odpowiedziach, jednak powinno znajdować się na tagu formularza, a nie na przycisku.

Santosh Kadam
źródło
7

dodanie niewidocznego przycisku przesyłania załatwia sprawę

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

zestaw narzędzi
źródło
Użyj opcji „widoczność: ukryta”; zamiast. Powyższe działało w chromie, ale nie w safari.
Moulde,
7

Po prostu dodaj (keyup.enter)="yourFunction()"

Saurabh Agrawal
źródło
4

Mam nadzieję, że może to komuś pomóc: z jakiegoś powodu nie mogłem śledzić z powodu braku czasu, jeśli masz formę taką jak:

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

po Enternaciśnięciu przycisku clearFormfunkcja jest wywoływana, mimo że oczekiwanym zachowaniem było wywołanie doSubmitfunkcji. Zmiana Clearprzycisku na <a>tag rozwiązała problem. Nadal chciałbym wiedzieć, czy jest to oczekiwane, czy nie. Wydaje mi się to zagmatwane

Andrea Gherardi
źródło
8
aby tego uniknąć, dla przycisku Wyczyść określono type = "button"
radio_head
3

Jeśli chcesz uwzględnić oba prostsze niż to, co widziałem tutaj, możesz to zrobić, po prostu umieszczając przycisk w formularzu.

Przykład z funkcją wysyłającą wiadomość:

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

Możesz wybrać pomiędzy kliknięciem przycisku lub naciśnięciem klawisza Enter.

Emerica
źródło
Musiałem użyć tego w kombinacji z odpowiedzią @Clayton KN Passos i działało świetnie!
Jordan
1

Jeśli chcesz uwzględnić oba - zaakceptuj po wejściu i zaakceptuj po kliknięciu, a następnie zrób -

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

źródło