ejemplos - En Angular 2, ¿cómo presento un valor de tipo de entrada="texto" al presionar enter?

angular wikipedia

Question

Estoy construyendo un cuadro de búsqueda en mi aplicación Angular 2, tratando de enviar el valor al presionar ''Enter'' (el formulario no incluye un botón).

Modelo

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

Con una simple función de envío de prueba con fines de prueba ...

export class HeaderComponent implements OnInit {
  constructor() {}

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

ngSubmit no parece funcionar en este caso. Entonces, ¿cuál es la ''Angular 2 vías'' para resolver esto? (Preferiblemente sin hacks como botones ocultos)

Answer 1

En HTML normal necesita un <button type="submit" ></button> o <input type="submit" /> para enviar el formulario al presionar enter. Estos elementos pueden estar ocultos por CSS, pero deben estar presentes dentro del formulario. ng-submit debe estar vinculado al evento onsubmit normal y tiene las mismas condiciones para ser activado.

También del código que ha publicado, no tiene ningún elemento de formulario, sino solo el campo de entrada, y la directiva ng-submit solo funciona con formularios porque los elementos de entrada no onsubmit evento JS onsubmit .

Answer 2

En aras de la exhaustividad, esta solución también funcionó para mí:

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

Answer 3

Puede poner este cuadro de texto dentro de una etiqueta de formulario y establecer el evento ngSubmit en forma, es decir,

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

Answer 4

(keyup.enter)="methodInsideYourComponent()" agregue esto dentro de su etiqueta de entrada