CODEWITHSUNDEEP
htmlangularangular2-forms
Klyner
Klyner

Reputation: 4163

How to disable an enter-action within a form using Angular 2 / 4?

I am updating a project which has been made in Angular 4. The website consists of multiple forms which include input field. When the user presses 'enter' the form is being submitted. I want to prevent this from happening. How can I do that?

Is there something that I can place within the quotationmarks which disables the submit action from happening: (keydown.enter)=""

form.component.html

<div class="d-flex justify-content-center hm-row">
  <form class="hm-form" [formGroup]="crossingForm">
    <div class="form-group">
      <label for="dynamicThresholdTime">{{ 'CROSSING.DYNAMIC_THRESHOLD_TIME' | translate}}</label>
      <input type="text" class="form-control" id="dynamicThresholdTime" placeholder="" formControlName="dynamicThresholdTime">
     </div>
     <...more code...>
   </form>
</div>

Upvotes: 1

Views: 3798

Answers (3)

PhoenixWright
PhoenixWright

Reputation: 1

Buttons with type="submit" have default behavior. Choose type="button" for no default.

Also had this happen with a form and input field. event.preventDefault() in my client side script solved this.

Upvotes: 0

user4676340
user4676340

Reputation:

You also can remove the form tag and replace it with a div. Browsers make this behavior because of the form tag.

Upvotes: 2

Vivek Doshi
Vivek Doshi

Reputation: 58523

Use this :

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

Upvotes: 5

Related Questions