Submitting a form by pressing enter key in angular 4

Question

By pressing Enter key need to submit the form in angular 4 below is my code in form Action = "" is not working. I also tried with (keydown) = domonething(event) and (keydown.enter) = domonething(event) with below code

keyDownFunction(event) {
    if (event.keyCode == 13) {
        this.submit();
    }
}

Below is my current code

<form #f="ngForm" (ngSubmit)="f.form.valid && openModal(confirmationmodal)" novalidate action="">
    <div class="form-group form-row">
        <label class="col-form-label col-sm-4 col-md-4" for="name">Employee Name</label>
        <div class="col-sm-8 col-md-8">
            <span type="text" readonly class="form-control-plaintext" id="name">{{employeeDetails.EmployeeName}}</span>
        </div>
    </div>
    <div class="form-group form-row">
        <label class="col-form-label col-sm-4 col-md-4 " for="name">Manager Name</label>
        <div class="col-md-8  col-sm-8">
            <span type="text" readonly class="form-control-plaintext"
                id="manager">{{employeeDetails.ManagerName}}</span>
        </div>
    </div>
    <div class="form-group form-row">
        <label for="name" class="col-sm-4 col-md-4 col-form-label">Subject</label>
        <div class="col-md-8 col-sm-8">
            <span type="text" readonly class="form-control-plaintext" id="manager">{{subject}}</span>
        </div>
    </div>

    <button class="btn btn-success float-right" type="submit" id="submit">Submit</button>
</form>

It's duplicate of https://stackoverflow.com/questions/37577919/angular2-submit-form-by-pressing-enter-without-submit-button — Chintan Kukadiya, Mar 25 '19 at 08:59
Possible duplicate of [angular2 submit form by pressing enter without submit button](https://stackoverflow.com/questions/37577919/angular2-submit-form-by-pressing-enter-without-submit-button) — Shofol, Mar 25 '19 at 09:10

score 8 · Answer 1 · answered Mar 25 '19 at 08:55

8

give (keyup.enter)="yourFunction()" in your submit button

answered Mar 25 '19 at 08:55

Seba Cherian

1,755
6
18

norbitrial · Answer 2 · 2019-03-25T09:01:22.083

From your form tag I would remove the action attribute and put the following:

<form #f="ngForm" (ngSubmit)="f.form.valid && openModal(confirmationmodal)" novalidate (keydown.enter)="onEnterKeyDown($event)">

Then simply writing the key down event's function:

onEnterKeyDown($event) {
  // here you can open your confirmation modal if the form is valid
}

Source: https://alligator.io/angular/binding-keyup-keydown-events/

score 0 · Answer 3 · answered Mar 25 '19 at 08:50

0

this should work

(keydown)="keyDownFunction($event)

in typescript

  keyDownFunction(event) {
    if ( event.keyCode === 13) {
      // do your function
    }
  }

this works for me. I think you've missed $ in front of event.

answered Mar 25 '19 at 08:50

GreedyAi

2,709
4
29
55

score 0 · Answer 4 · answered Mar 25 '19 at 08:54

If you want to invoke it with the button then you can do like this-

<button type="button" (keyup.enter)="doSomething()" >Click Me!</button>

See live here- https://stackblitz.com/edit/angular-3gf6hw

See more about it here- https://angular.io/guide/user-input#key-event-filtering-with-keyenter

Submitting a form by pressing enter key in angular 4

4 Answers4

Linked