Angular 2 empêche l'entrée de soumettre dans un formulaire piloté par un modèle

Question

J'ai des formulaires qui utilisent le plan directeur basé sur des modèles, donc quelque chose comme ceci :

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

Maintenant, comment puis-je empêcher ENTER de soumettre le formulaire ? Cela interfère avec le comportement personnalisé d'ENTRÉE à l'intérieur du formulaire et aussi si vous appuyez accidentellement sur ENTRÉE dans une entrée, ce qui est indésirable.

J'ai cherché et trouvé d'anciennes réponses sur Angular 1 et d'autres sur JavaScript, mais je pense qu'Angular 2 doit avoir quelque chose de ce genre déjà intégré, mais je n'ai pas pu le trouver.

Si ce n'est pas le cas, quelle serait la meilleure façon d'y parvenir ?

Answer 1

C'est ce qui m'a aidé :

• le bouton qui doit agir comme celui qui soumet devrait être type="button"
• ce bouton devrait avoir (click)="onSubmit()" <- la méthode qui sera appelée
• et vous pouvez supprimer par exemple (ngSubmit)="onSubmit()" de <form [formGroup]="form" (ngSubmit)="onSubmit()">

Je ne suis pas sûr qu'il y ait des effets secondaires en retirant (ngSubmit) du formulaire. BTW : J'ai observé que

<form (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()"></form>

ont désactivé les validateurs personnalisés.

Answer 2

Angular 6.x+ Pour empêcher la saisie dans une entrée spécifique, faites ceci :

<input type="text" (keydown)="$event.keyCode == 13 ? $event.preventDefault() : null">

Answer 3

J'ai eu le même problème, ceci m'a aidé :

<button type="submit" [disabled]="!myForm.valid">Save</button>

Answer 4

Angulaire 10

$event.preventDefault() n'a pas fonctionné pour moi - $event.stopPropagation l'a fait.