Home > Software design >  Enter key behaviour Angular and Material form
Enter key behaviour Angular and Material form

Time:01-04

In my forms in a MEAN application I have:

<form novalidate [formGroup]="thesisForm"
  enctype="multipart/form-data"
  (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()">

I do this because occasionally people press enter without wanting to submit the form. So to avoid accidents I add the prevent default.

BUT this results in text areas not reacting to the enter key and I cannot introduce line spaces. If I write the text and copy paste it I can add the new lines, but not when pressing enter . How can I fix this so that I can use the text area normally?

CodePudding user response:

You can leave preventDefault() on form element, and add (keydown.enter)="$event.stopPropagation()" on particular element (like textarea) and hitting enter there won't trigger a submit, and will allow new line in multi-line inputs.

  •  Tags:  
  • Related