How to submit form on pressing Enter with Angular 9?
To submit a form in angular we have the following options:
- 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= 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:
