Angular 2 запретить ввод из формы в форме шаблона

У меня есть формы, которые используют шаблонную схему, так что примерно так:

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

Теперь, как я могу помешать ENTER от отправки формы? Это мешает пользовательскому поведению ВВОД внутри формы, а также если вы случайно нажимаете ввод на входе, что нежелательно.

Я огляделся и нашел несколько старых ответов Angular 1, а также некоторые стандартные JavaScript, но я чувствую, что Angular 2 должен иметь что-то вроде этого уже встроенного, но я не смог его найти.

Если они этого не сделают, каким будет лучший способ достичь этого?

Ответ 1

Оказывается, вы можете использовать что-то простое:

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

Чтобы предотвратить отправку формы на ВВОД.

Ответ 2

Чтобы разрешить ввод ключа работать в текстовых областях, но не допускать отправки формы, вы можете изменить следующим образом:

В HTML-шаблоне:

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

В классе компонента в коде .ts позади:

handleEnterKeyPress(event) {
    const tagName = event.target.tagName.toLowerCase();
    if (tagName !== 'textarea') {
      return false;
    }
  }

Ответ 3

Я знаю, что опоздал, но, может быть, у меня есть правильное решение для этого,

если вы используете < button >, просто определите

<button type="button">

а не определять его или определять как type = "submit", потому что, если вы его не определите, он отправит вашу форму.

То же самое, если вы используете <input> то также определите

<input type="button">

и это будет работать.

- Отредактировано как @Chrillewoodz комментарий.

Если вы хотите выполнить какой-то конкретный процесс при отправке/клике, вы можете добавить событие click для кнопки, и в этом случае вы можете делать все, что захотите.

Если вы хотите использовать тег Form в угловых файлах TS, то вы можете использовать @ViewChild.

Ответ 4

Была такая же проблема, это помогло мне:

<button type="submit" [disabled]="!myForm.valid">Save</button>