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: