Angular 2 prevent enter from submitting in template-driven form

Question

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

  &         


        

Answer 1

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 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

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 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

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

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

Answer 6

Had the same issue, this helped me:

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