Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular2 submit form by pressing enter without submit button

People also ask

How do you submit a form when Enter is pressed?

To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. Explanation: We use the jQuery event. which to check the keycode on the keypress.

Can we submit form without button?

The form can be submitted without using submit button by implementing a specific event attribute or by clicking the link. This task can be done by using the OnClick event attribute or by using the form. submit() method in Javascript.

How do you disable submit on Enter key?

Use preventDefault() event method to Prevent form submission on the “Enter” key pressed in JavaScript. Enter key keycode is 13, so you can check in if statement.


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


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

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>


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.


This way is much simple...

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

</form>

add this inside your input tag

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