How To Disable Enter Key To Submit Form In Angular?

How to Disable Enter Key to Submit Form in Angular?

In this post we will give you information about How to Disable Enter Key to Submit Form in Angular?. Hear we will give you detail about How to Disable Enter Key to Submit Form in Angular?And how to use it also give you demo for it if it is necessary.

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 and angular 9 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 >
    <h1>How to check form is valid or not in Angular - ItSolutionStuff.com</h1>
    <form [formGroup]="form" (ngSubmit)="submit()">
        <div >
            <label for="name">Name</label>
            <input 
                formControlName="name"
                id="name" 
                type="text" 
                >
        </div>
        <div >
            <label for="email">Email</label>
            <input 
                formControlName="email"
                id="email" 
                type="text" 
                >
        </div>
        <strong>Result:</strong>
        <pre>{{ form.valid }}</pre>
        <button  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

Also see:Angular Material Select Box | Angular 9/8 mat-select Reactive Form Example

true
{name: "hardik", email: "hardik@gmail.com"}

Let’s see bellow layout:

I hope it can help you…

Hope this code and post will helped you for implement How to Disable Enter Key to Submit Form in Angular?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

How to Disable Enter Key to Submit Form in Angular?

Leave a Comment Cancel Reply