How to submit form on pressing Enter with Angular 9? Last Updated : 05 Nov, 2020 Comments Improve Suggest changes Like Article Like Report 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. 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 More infoAdvertise with us Next Article How to validate checkbox form in angular 15 V vaibhav19verma Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Misc Similar Reads How to add Buttons without Submit the Form in Angular? In Angular, when adding buttons to a form, their default behavior on click is to submit the form itself. However, there are certain situations in which it is necessary to create buttons for forms that provide some sort of functionality or trigger custom logic without triggering the default form subm 5 min read How to clear form after submission in Angular 2? In Angular 2, they are two types of forms: Template-driven forms. Reactive forms. In template-driven forms, most of the content will be populated in .html file.In Reactive forms, most of the functionalities and content will be performed in .ts file. The main advantage of reactive forms is, we can cr 2 min read How to submit a form on Enter button using jQuery ? Given an HTML form and the task is to submit the form after clicking the 'Enter' button using jQuery. To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. html <!DOCTYPE html> 2 min read How to prevent form submission when input validation fails in AngularJS ? Validation of fields is an important process while developing a dynamic web application. In terms of security, validation is an important concept. We pass the data from the client side through input fields to the server. If any of the fields is not validated properly and the user sends any irrelevan 6 min read How to validate checkbox form in angular 15 In Angular applications, it is often necessary to validate form inputs to ensure that users provide the required information correctly. Checkbox inputs are commonly used to allow users to select one or more options from a list. This article will cover different approaches to validating checkbox inpu 5 min read How To Use Reactive Forms in Angular? In Angular, the forms are an important part of handling user input and validation. Reactive Forms offers a model-driven approach that provides greater control and flexibility by managing form controls, validation, and data binding directly within the component class. Core ComponentsFormGroup: Repres 5 min read Like