Angular 2 prevent enter from submitting in template-driven form

Question

I have forms that uses the template-driven blueprint, so something like this:

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

Now, how can I prevent ENTER from submitting the form? It interferes with custom ENTER behaviour inside of the form and also if you accidentally press enter in an input, which is unwanted.

I've looked around and found some old Angular 1 answers and also some standard JavaScript ones but I feel that Angular 2 must have something like this already built in but I haven't been able to find it.

If they don't, what would be the best way to achieve this?

Answer 1

Turns out that you can use something as simple as:

<form (keydown.enter)="$event.preventDefault()"></form>

To prevent the form from submitting on ENTER.

Answer 2

I know i am late, but may be i got proper solution for this,

if you are using <button> then just define

<button type="button">

rather not defining it or defining it as type="submit" because if you dont define it, it will submit your form.

Same if you are using <input> then also define

<input type="button"> 

and this will work.

-- Edited As @Chrillewoodz comment.

If you wish to do some specific process on submit/click You can add click event to button, and in that you can do what ever you want.

If you want Form tag in angular ts files, then you can use @ViewChild.

Answer 3

To allow enter key to work in textareas but prevent from submitting form, you could modify as follows:

In HTML template:

<form (keydown.enter)="handleEnterKeyPress($event)">...</form>

In the component's class in the .ts code behind:

handleEnterKeyPress(event) {
    const tagName = event.target.tagName.toLowerCase();
    if (tagName !== 'textarea') {
      return false;
    }
  }

Answer 4

Angular: 8.2.11

<div class="div101">
  <div class="card col-md-10">
    <form [formGroup]="postForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onSubmit()">
      <br />
      <div class="form-group">
        <label class="col-md-3">Name</label>
        <input class="col-md-12 form-control" type="text" formControlName="Name" required>
      </div>

      <div class="form-group">
        <label class="col-md-4">Date of Birth</label>
        <input type="text" placeholder="Date of Birth" class=" col-md-12 form-control" formControlName="DateofBirth"
          required bsDatepicker>
      </div>

      <div class="form-group">
        <label class="col-md-3">Mobile No</label>
        <input class="col-md-12 form-control" type="text" formControlName="MobileNo" required>
      </div>


      <div class="form-group">
        <label for="SelectCountry" class="col-md-3">Country</label>
        <select class="col-md-12 form-control" formControlName="Country" (change)="onChangeCountry($event)">
          <option *ngFor="let country of country; let i = index" value="{{i}}">{{country.name}}</option>
        </select>
      </div>


      <div class="form-group">
        <button type="submit" (click)="Save()" [disabled]="!postForm.valid" class="btn btn-success">Submit</button>
      </div>
    </form>
  </div>
</div>

Answer 5

Use:

<form (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()"></form>

And it'll prevent tag and what is in this tag from submitting enter and shift + enter.

For example: It worked this for me:

<div name = "example" (keydown.shift.enter)="$event.preventDefault()" (keydown.enter)="$event.preventDefault()" ...

And after this, everything under this excample div are prevented from submitting enter and shift + enter.

More info about key combinations: https://alligator.io/angular/binding-keyup-keydown-events/#key-combinations

Answer 6

Had the same issue, this helped me:

<button type="submit" [disabled]="!myForm.valid">Save</button>

Answer 7

This is what helped me:

• the button that has to act as submitting one should be type="button"
• that button should have (click)="onSubmit()" <- the method that will be called
• and you can remove i.e. (ngSubmit)="onSubmit()" from <form [formGroup]="form" (ngSubmit)="onSubmit()">

I am not sure if there are side-effects of removing (ngSubmit) from the form. BTW: I observed that

<form (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()"></form>

have disabled custom validators.

Answer 8

Angular 6.x+ To prevent enter in any specific input do this:

<input type="text" (keydown)="$event.keyCode == 13 ? $event.preventDefault() : null">

Answer 9

Angular 10

$event.preventDefault() did not work for me - $event.stopPropagation did.