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

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 2

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 3

Angular 10

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