html - Botón de envío en Angular 5 al presionar la tecla Enter

Tengo una aplicación de formularios en Angular 5 que utiliza todos los modelos habituales, pero en los formularios quiero que el formulario se envíe sin tener que hacer clic físicamente en el botón 'Enviar'.

Sé que normalmente es tan fácil como agregar type=submit a mi elemento de botón, pero no parece estar funcionando en absoluto.

Realmente no quiero llamar a una función onclick solo para que funcione. ¿Alguien puede sugerir algo que pueda estar perdiendo?

<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
  <mat-card>
    <mat-card-title class="firstCard">Investor/Adviser search</mat-card-title>
    <mat-card-content>
      <p *ngIf="this.noCriteria" class="errorMessage">Please enter search criteria.</p>
      <p *ngIf="this.notFound" class="errorMessage">No investor's or adviser's found.</p>
        <mat-form-field>
          <input matInput id="invReference" placeholder="Investor/Adviser reference (e.g. SCC/AJBS)" #ref>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invId" placeholder="Investor/Adviser ID" type="number" #id>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invForname" placeholder="Forename" #forename>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invSurname" placeholder="Surname" #surname>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invPostcode" placeholder="Postcode" #postcode>
        </mat-form-field>
    </mat-card-content>
    <mat-card-footer>
      <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search.">Search</button>
    </mat-card-footer>
  </mat-card>
</form>

Respuesta #1

intenta usar keyup.enter o keydown.enter

  <button type="submit" (keyup.enter)="search(...)">Search</button>

Respuesta #2

En caso de que alguien se pregunte qué valor de entrada

<input (keydown.enter)="search($event.target.value)" />

Respuesta #3

También podrías usar un formulario ficticio alrededor de él como:

<mat-card-footer>
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
  <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search." >Search</button>
</form>
</mat-card-footer>

la función de búsqueda tiene que return false para asegurarse de que la acción no se ejecute.
Solo asegúrate de que el formulario esté enfocado (debería estarlo cuando tengas el campo de entrada en el formulario) al presionar enter.

Respuesta #4

Además de otras respuestas que me ayudaron, también puedes añadirlo al div circundante. En mi caso, esto era para iniciar sesión con los campos de Nombre de usuario/Contraseña.

<div (keyup.enter)="login()" class="container-fluid">

Respuesta #5

Intenta usar keyup.enter pero asegúrate de usarlo dentro de tu etiqueta input