How to submit form on pressing Enter with Angular 9?

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 directive 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.
filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


  • code for the component:
filter_none

edit
close

play_arrow

link
brightness_4
code

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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.