web-dev-qa-db-fra.com

Angular 5 Bouton Soumettre une pression sur une touche Entrée

J'ai une application de formulaire Angular 5) qui utilise tous les modèles habituels, mais je souhaite que le formulaire soit envoyé sans avoir à cliquer physiquement sur le bouton "Soumettre".

Je sais que c'est aussi simple que d'ajouter type=submit à mon élément de bouton mais il ne semble pas fonctionner du tout.

Je ne veux pas vraiment appeler une fonction onclick simplement pour la faire fonctionner. Quelqu'un peut-il suggérer quelque chose qui me manque?.

<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>
htmlangularangular5
8
murday1983

vous pouvez aussi utiliser une forme factice comme:

<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 fonction de recherche doit return false pour s'assurer que l'aciton ne soit pas exécuté.
Assurez-vous que le formulaire est bien centré (devrait l'être lorsque vous avez saisi les informations dans le formulaire) lorsque vous appuyez sur Entrée.

12
Tobias Fuchs

essayez d'utiliser keyup.enter ou keydown.enter

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

Au cas où quelqu'un se demanderait quelle valeur d'entrée

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