Ответ 1
Оказывается, вы можете использовать что-то простое:
<form (keydown.enter)="$event.preventDefault()"></form>
Чтобы предотвратить отправку формы на ВВОД.
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 должен иметь что-то вроде этого уже встроенного, но я не смог его найти.
Если они этого не сделают, каким будет лучший способ достичь этого?
Ответы
Ответ 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>