How to submit form on pressing Enter with Angular 9?

05 Nov, 2020
To submit a form in angular we have the following options:
Create a button to submit the form.Assign a key to submit the formOr we can do both.
Create a button to submit the form.
Assign a key to submit the form
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:
bunnyram19
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.