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?

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

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

Solution 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;
    }
  }

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

Solution 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 example div are prevented from submitting enter and shift + enter.

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

View more solutions

Comments

[Chrillewoodz]

@EduardoOliveira Yes, but you can still shift + enter.

[Chrillewoodz]

Wouldn't this still trigger submitting the form?

[bharatpatel]

you can add click event that, and in that you can do what ever you want. if you want form tag in angular ts files, then you can use @ViewChild. Go through Angular2+ theory.

[Benjamin M]

I'm using this: <form #ngForm="ngForm"><button (click)="ngForm.onSubmit()>SUBMIT</button></form>" with reactive forms.

[bharatpatel]

@BenjaminM If you don't pass type='button' form will be submit when you click enter in any input box. so it is better to use button with type attribute.

[Roel]

sounds good but you will miss validators especially that of reactiveform controls. If you are planning to implement this then you need to write a custom validators.

[KCarnaille]

Still useful for Angular 6 or 7 users :)

[Benny]

This would not work for the OP's question. This only disables the submit button until the form is valid. Once valid data is typed in the input-field and Enter is pressed, the form would be submitted.

[Stephen Kaiser]

For the textarea issue: Using (keyup.enter)="$event.stopPropagation()" and (keypress.enter)="$event.stopPropagation()" on the <textarea> will still allow the user to enter new lines without shift+enter and should prevent submitting the form.

[llmora]

This solution worked for me: does away with submit on enter on specific fields, allows enter in textareas and still triggers angular FormBuilder validators

[Dinesh Gopal Chand]

@Chrillewoodz thanks for sharing this code. Basically I wanted to avoid form submission when someone is pressing enter key in a particular field, that's why added on the form field not on form, and it works for me like a charm,

[Chrillewoodz]

I don't think this is an optimal solution since the submitted state would not change on the ngForm directive. However I have not verified this.

[bharatpatel]

@Chrillewoodz By Viewchild object of form, you can mark it as submitted also whenever you need it.

[Kevin Oswaldo]

Worked for me in angular 10 👍🏼