How to Disable Enter Key to Submit Form in Angular?

By Hardik Savani | April 22, 2020 | Category : Angular


This article will give you example of how to disable enter key in angular. I’m going to show you about how to stop enter key event in angular. we will help you to give example of how to disable enter key to submit form angular. i would like to share with you disable enter key submit form angular.

Here, i will show how to stop submit form using enter key in angular 6, angular 7, angular 8, angular 9 and angular 10 application.

I will give you very simple example for prevent form submit using disabled in angular. bellow simple solution:

<button type="submit" [disabled]="!form.valid">Submit</button>

Now we will see full example then you can understand how it works. let's see bellow:

Import FormsModule:

src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Template Code:

In this step, we will write code of html form with ngModel. so add following code to app.component.html file.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.

src/app/app.component.html

<div class="container">

<h1>How to check form is valid or not in Angular - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div class="form-group">

<label for="name">Name</label>

<input

formControlName="name"

id="name"

type="text"

class="form-control">

</div>

<div class="form-group">

<label for="email">Email</label>

<input

formControlName="email"

id="email"

type="text"

class="form-control">

</div>

<strong>Result:</strong>

<pre>{{ form.valid }}</pre>

<button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>

</form>

</div>

updated Ts File

src/app/app.component.ts

import { Component } from '@angular/core';

import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

form = new FormGroup({

name: new FormControl('', [Validators.required, Validators.minLength(3)]),

email: new FormControl('', [Validators.required, Validators.email])

});

submit(){

console.log(this.form.valid);

if(this.form.valid){

console.log(this.form.value);

}

}

}

Now you can run your application using following command:

ng serve

Output

true

{name: "hardik", email: "[email protected]"}

Let's see bellow layout:

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: