В Angular 2, как мне ввести тип ввода = "текст" при нажатии Enter?

Я создаю окно поиска в своем приложении Angular 2, пытаясь отправить значение при нажатии 'Enter' (форма не включает кнопку).

Шаблон

<input type="text" id="search" class="form-control search-input" name="search" placeholder="Search..." [(ngModel)]="query" (ngSubmit)="this.onSubmit(query)">

С простой функцией onSubmit для целей тестирования...

export class HeaderComponent implements OnInit {
  constructor() {}

  onSubmit(value: string): void {
    alert('Submitted value: ' + value);
  }
}

ngSubmit, похоже, не работает в этом случае. Итак, что такое "Angular 2 way", чтобы решить эту проблему? (Желательно без хаков, таких как скрытые кнопки)

Ответы

Ответ 1

(keyup.enter)="methodInsideYourComponent()" добавьте это в свой тег ввода

Ответ 2

В обычном HTML вам нужно <button type="submit" ></button> или <input type="submit" />, чтобы отправить форму при нажатии enter. Эти элементы могут быть скрыты css, но должны присутствовать внутри формы. ng-submit должен быть связан с обычным событием onsubmit, и он имеет те же условия, которые должны быть запущены.

Также из кода, который вы опубликовали, у вас нет элемента формы, а только поля ввода, а директива ng-submit работает только с формами, потому что входные элементы не имеют события onsubmit JS.

Ответ 3

Вы можете поместить это текстовое поле внутри тега формы и установить свойство ngSubmit в форме i.e.

<form (ngSubmit)="YouMethod()">
    <input type="text" class="form-control input-lg" />
</form>

Ответ 4

Для полноты, это решение сработало и для меня:

<form (keydown)="keyDownFunction($event)"><input type="text" /></form>