angular2 submit form by pressing enter without submit button

Question

Is it possible to submit a form that does not have submit button (by pressing enter) example :

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

score 268 · Answer 1 · answered Jan 23 '17 at 23:05

268

You can also add (keyup.enter)="xxxx()"

answered Jan 23 '17 at 23:05

sizzle

2,883
2
13
10

This works great if you just have a plain old function you'd like to call instead of a submit handler – Scott R. Frost Apr 05 '17 at 13:18
4

This approach were mentioned on Angular docs. https://angular.io/docs/ts/latest/guide/user-input.html#!#key-event-filtering-with-key-enter- – trungk18 May 16 '17 at 06:17
This is the only way it works in my situation, thanks! – switch87 Feb 15 '18 at 10:56
8

This should be the accepted answer. Elegance in only the way Angular can achieve. Brilliant. – Scott Byers Apr 24 '18 at 18:37
New mention in the Angular documentation: https://angular.io/guide/user-input#key-event-filtering-with-keyenter – Rafael Neto Aug 20 '18 at 13:00

score 101 · Accepted Answer · edited Nov 15 '20 at 05:15

Maybe you add keypress or keydown to the input fields and assign the event to function that will do the submit when enter is clicked.

Your template would look like this

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

And you function inside the your class would look like this

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

score 97 · Answer 3 · edited May 15 '18 at 14:36

97

Edit:

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

In order to use this method, you need to have a submit button even if it's not displayed "Thanks for Toolkit's answer"

Old Answer:

~~Yes, exactly as you wrote it, except the event name is (submit) instead of (ngSubmit):~~

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

edited May 15 '18 at 14:36

Community

1
1

answered Jun 01 '16 at 21:50

Abdulrahman Alsoghayer

16,462
7
51
56

2

can you please provide a plunker? because it doesn't work – Toolkit Mar 09 '17 at 18:45
Use "visibility: hidden;" instead. The "display:none;" worked in chrome, but not in safari. – Moulde Jul 04 '18 at 12:23
This should be used, except that the submit-button should not be hidden but visible because some folks will look for that button and won't bother to press enter. – Impulse The Fox Jan 03 '20 at 23:34

score 42 · Answer 4 · answered Apr 28 '17 at 17:24

42

I prefer (keydown.enter)="mySubmit()" because there won't be added a line break if the cursor was somewhere within a <textarea> but not at its end.

answered Apr 28 '17 at 17:24

Martin Schneider

14,263
7
55
58

1

This should be the accepted solution - much cleaner – rhysclay Jul 30 '19 at 04:37

Clayton K. N. Passos · Answer 5 · 2018-03-08T13:29:00.277

40

This way is much simple...

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

</form>

edited Mar 08 '18 at 13:29

answered Feb 13 '17 at 18:30

Clayton K. N. Passos

1,292
12
15

2

Thank you, it is easier when I expected. Solved like this: – Loutocký Jun 06 '17 at 15:39
2

much easier this way rather than sending a function with $event. Thank you! – Helen Feb 09 '18 at 04:23
1

much better. no hidden buttons or js. Pure angular way – RenanSS Dec 09 '18 at 12:23
Had to do like this:
using Angular 9, but works great.
– Jordan Sep 04 '20 at 21:49

score 12 · Answer 6 · answered Mar 14 '19 at 06:48

12

add this inside your input tag

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

answered Mar 14 '19 at 06:48

Abdus Salam Azad

5,087
46
35

1

thank brother. I prefer this option over the selected answer. – Santosh Jun 10 '20 at 10:44

Santosh Kadam · Answer 7 · 2019-11-08T10:34:24.500

11

(keyup.enter)="methodname()"

this should work and already mentioned in many answers, however that should be present on form tag and not on button.

edited Nov 08 '19 at 10:34

answered Nov 08 '19 at 09:05

Santosh Kadam

1,265
14
14

score 10 · Answer 8 · answered Jun 27 '18 at 07:29

Always use keydown.enter instead of keyup.enter to avoid lagging.

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

and function inside component.ts

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

score 9 · Answer 9 · answered Dec 05 '20 at 10:04

Most answers here suggest using something like:

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

</form>

This approach does not result in the form object being marked as submitted. You might not care for this, but if you're using something like @ngspot/ngx-errors (shameless self-promotion) for displaying validation errors, you gonna want to fix that. Here's how:

<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="submitBtn.click()">
  <button #submitBtn>Submit</button>
</form>

score 8 · Answer 10 · answered Dec 30 '17 at 07:58

8

Just simply add (keyup.enter)="yourFunction()"

answered Dec 30 '17 at 07:58

Saurabh Agrawal

7,581
2
27
51

score 7 · Answer 11 · answered Mar 09 '17 at 18:48

7

adding an invisible submit button does the trick

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

answered Mar 09 '17 at 18:48

Toolkit

10,779
8
59
68

Use "visibility: hidden;" instead. The above worked in chrome, but not in safari. – Moulde Jul 04 '18 at 12:23

score 4 · Answer 12 · answered May 16 '17 at 14:33

Hopefully this can help somebody: for some reason I couldn't track because of lack of time, if you have a form like:

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

when you hit the Enter button, the clearForm function is called, even though the expected behaviour was to call the doSubmit function. Changing the Clear button to a <a> tag solved the issue for me. I would still like to know if that's expected or not. Seems confusing to me

inorder to avoid that, you have specify type="button" for Clear button — radio_head, Aug 03 '17 at 15:11

score 4 · Answer 13 · answered Aug 11 '18 at 07:23

If you want to include both simpler than what I saw here, you can do it just by including your button inside form.

Example with a function sending a 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>

You can choose between clicking on the button or pressing enter key.

Had to use this in combo with @Clayton K. N. Passos answer and worked great! — Jordan, Sep 04 '20 at 21:57

score 1 · Answer 14 · answered May 17 '18 at 10:24

If you want to include both - accept on enter and accept on click then do -

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

score 1 · Answer 15 · answered Aug 10 '21 at 10:17

Well, there's a small caveat here, I would say. None of the above would work if you want to submit the form until unless you click anywhere on the form or specifically on the input field.

Well if you want to submit the form just by hitting enter without clicking anywhere, you need to declare it globally in html:

<button (window:keypress)="onSomeAction($event)">

and in TS file :

onSomeAction(event){
if(event.keyCode===13){
  //submit form
}

}

OR

<button (window:keypress.enter)="onSomeAction($event)">

score 0 · Answer 16 · answered Jun 25 '22 at 07:18

0

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

answered Jun 25 '22 at 07:18

nisith

11
3

angular2 submit form by pressing enter without submit button

16 Answers16

Linked