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

Roderickroderigo

Answer 1

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

Neil

Answer 2

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

Floccose

This works great if you just have a plain old function you'd like to call instead of a submit handler – Rockaway

This approach were mentioned on Angular docs. angular.io/docs/ts/latest/guide/… – Devitrify

This is the only way it works in my situation, thanks! – Vertigo

This should be the accepted answer. Elegance in only the way Angular can achieve. Brilliant. – Circuitry

New mention in the Angular documentation: angular.io/guide/user-input#key-event-filtering-with-keyenter – Telegram

Answer 3

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>

Embus

can you please provide a plunker? because it doesn't work – Superheat

Use "visibility: hidden;" instead. The "display:none;" worked in chrome, but not in safari. – Cerf

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. – Patellate

Answer 4

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.

Palmy

This should be the accepted solution - much cleaner – Luxuriance

Answer 5

This way is much simple...

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

</form>

Quadri

Thank you, it is easier when I expected. Solved like this: <input type="text" class="form-control" [(ngModel)]="object.LanguageTableData" (blur)="mymethod()" (keyup.enter)="mymethod()" /> – Mihe

much easier this way rather than sending a function with $event. Thank you! – Fenton

much better. no hidden buttons or js. Pure angular way – Forefront

Had to do like this: <form #f="ngForm" (keyup.enter)="appendSigBlock(f.value)"> using Angular 9, but works great. – Wellnigh

Answer 6

add this inside your input tag

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

Epexegesis

thank brother. I prefer this option over the selected answer. – Obcordate

Answer 7

(keyup.enter)="methodname()"

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

Carnelian

Answer 8

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 = '';
  }

Luncheonette

Answer 9

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>

Killebrew

Answer 10

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

Nickolenicks

Answer 11

adding an invisible submit button does the trick

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

Superheat

Use "visibility: hidden;" instead. The above worked in chrome, but not in safari. – Cerf

Answer 12

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

Lizarraga

inorder to avoid that, you have specify type="button" for Clear button – Niklaus

Answer 13

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.

Wisdom

Had to use this in combo with @Clayton K. N. Passos answer and worked great! – Wellnigh

Answer 14

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>

Formosa

Answer 15

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

Seriatim

Answer 16

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

Edifice