How to submit form on pressing Enter with Angular 9?

Last Updated : 5 Nov, 2020

To submit a form in angular we have the following options:

  1. Create a button to submit the form.
  2. Assign a key to submit the form
  3. Or we can do both.

In this tutorial, we will see how to use a specific key(Enter in this case) to submit a form.

Approach:

We can use angular keydown event to use Enter key as our submit key. 

  • Add keydown directive inside the form tag.
  • Create a function to submit the form as soon as Enter is pressed.
  • Assign the keydown event to the function.

Example:

Let's create a form having both, button and Enter key as mode of form submission.

  • We will use bootstrap classes, so add bootstrap scripts in your index.html.
html 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tutorial</title>

        <!--add bootstrap script here-->
        <link rel="stylesheet"
              href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
              integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
              crossorigin="anonymous" />
      
        <script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js" 
                integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
                crossorigin="anonymous"></script>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
                crossorigin="anonymous"></script>
        <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
                integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>
  • code for the component:
javascript 
import { Component } from '@angular/core'; 
@Component({ selector: 'app-root', 
//here we used inline template format. template: `

<div style="text-align: center;">
    <h1>
        {{title}}
    </h1>
</div>

<!--using keydown to assign the event to call EnterSubmit method-->

<form #geeksForm="ngForm" 
      (keydown)="EnterSubmit($event, geeksForm.form)" 
      (ngSubmit)="submitit(geeksForm.form);">
  
    <button class="btn btn-primary" 
            [disabled]="!geeksForm.valid">
      Submit
  </button>
    <input type="text" 
           class="form-control" 
           name="geek-name" 
           ngModel #geekname="ngModel" 
           required minlength="5" />
  
    <div *ngIf="geekname.errors.required">
        The geek name is required
    </div>
    <div *ngIf="geekname.errors.minlength">
The geek name should be at least {{
      geekname.errors.minlength.requiredLength }} characters long
    </div>
    <select class="form-control" 
            name="geek-type" 
            ngModel #geeksField="ngModel"
            required>
        <option *ngFor="let geek of geeks"
                [value]="geek.id">
            {{ geek.name }}
        </option>
        <div *ngIf="geeksField.touched && !geeksField.valid">
            The category is required
        </div>

`, styleUrls: [] }) export class AppComponent 
      { title = 'Form submission tutorial';
      public name = "geek"; geeks = [ {id: 1, name: "c++geek"}, 
      {id: 2, name: "pythongeek"}, {id: 3, name: "javageek"},
      {id: 4, name: "javascriptgeek"},
        {id: 5, name: "angulargeek"} ]; 
 /*assigning EnterSubmit function to keydown event
      and using Enter key to submit the form. */
 //Function will take two parameters: 
      //1.The key pressed. 
      //2.form. EnterSubmit(event, form) { 
          //keycode for
        Enter is 13 if (event.keyCode === 13) {
 alert('Enter key is pressed, form will be submitted'); 
//calling submit method if key pressed is Enter.
      this.submitit(form); } } 
      //function to submit the form submitit(form){
        console.log(form.value);
alert("The form was submitted"); form.reset(); } }
    </select>
</form>

Output:

Comment

Explore