Skip to content
Related Articles

Related Articles

Improve Article

How to submit form on pressing Enter with Angular 9?

  • Last Updated : 05 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=
              integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous" />
       
        <script src=
                integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin="anonymous"></script>
        <script src=
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
        <script src=
                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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :