[Fixed] Angular – Allow Enter Key on textarea but not in formGroup

Issue

The user needs to use the enter key on the textarea but not in formGroup.

Heres my html

<form [formGroup]="interventionForm" (ngSubmit)="onSubmit()" (keydown.enter)="$event.preventDefault()">

    <textarea class="focus-input gap-textarea"></textarea>

<button type="submit" class="btn teq-btn">{{ lang.trans('send') }}</button>

</form>

The formGroup its not getting submited by pressing the enter key, but the textareas are getting affected to.

Solution

You need to use $event.stopPropagation() instead of $event.preventDefault().
Your code should look like this:

<form [formGroup]="interventionForm" (ngSubmit)="onSubmit()" (keydown.enter)="$event.stopPropagation()">

    <textarea class="focus-input gap-textarea"></textarea>

<button type="submit" class="btn teq-btn">{{ lang.trans('send') }}</button>

</form>