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

Il s'avère que vous pouvez utiliser quelque chose d'aussi simple que :

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

Pour empêcher le formulaire de se soumettre à l'entrée.

Answer 2

Je sais que je suis en retard, mais peut-être que j'ai une solution appropriée pour cela,

si vous utilisez < button >, il suffit de définir

<button type="button">

plutôt ne pas le définir ou le définir comme type="submit" car si vous ne le définissez pas, votre formulaire sera soumis.

De même si vous utilisez <input> alors définissez également

<input type="button"> 

et ça va marcher.

-- Edited As @Chrillewoodz commentaire.

Si vous souhaitez effectuer un processus spécifique lors de l'envoi/du clic, vous pouvez ajouter un événement de clic au bouton, et dans ce cas, vous pouvez faire ce que vous voulez.

Si vous souhaitez que la balise Form soit présente dans les fichiers angular ts, vous pouvez alors utiliser @ViewChild .

Answer 3

Pour permettre à la touche d'entrée de fonctionner dans les zones de texte mais empêcher la soumission du formulaire, vous pouvez modifier comme suit :

Dans le modèle HTML :

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

Dans la classe du composant dans le code .ts derrière :

handleEnterKeyPress(event) {
    const tagName = event.target.tagName.toLowerCase();
    if (tagName !== 'textarea') {
      return false;
    }
  }

Answer 4

Utilisez :

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

Et ça empêchera le tag et ce qui est dans ce tag de se soumettre entrez et shift + enter .

Par exemple : Ça a marché comme ça pour moi :

<div name = "example" (keydown.shift.enter)="$event.preventDefault()" (keydown.enter)="$event.preventDefault()" ...

Et après cela, tout ce qui se trouve sous cet exemple ne peut plus être soumis. entrez et shift + enter .

Plus d'informations sur les combinaisons de touches : https://alligator.io/angular/binding-keyup-keydown-events/#key-combinations

Answer 5

Angular : 8.2.11

<div class="div101">
  <div class="card col-md-10">
    <form [formGroup]="postForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onSubmit()">
      <br />
      <div class="form-group">
        <label class="col-md-3">Name</label>
        <input class="col-md-12 form-control" type="text" formControlName="Name" required>
      </div>

      <div class="form-group">
        <label class="col-md-4">Date of Birth</label>
        <input type="text" placeholder="Date of Birth" class=" col-md-12 form-control" formControlName="DateofBirth"
          required bsDatepicker>
      </div>

      <div class="form-group">
        <label class="col-md-3">Mobile No</label>
        <input class="col-md-12 form-control" type="text" formControlName="MobileNo" required>
      </div>

      <div class="form-group">
        <label for="SelectCountry" class="col-md-3">Country</label>
        <select class="col-md-12 form-control" formControlName="Country" (change)="onChangeCountry($event)">
          <option *ngFor="let country of country; let i = index" value="{{i}}">{{country.name}}</option>
        </select>
      </div>

      <div class="form-group">
        <button type="submit" (click)="Save()" [disabled]="!postForm.valid" class="btn btn-success">Submit</button>
      </div>
    </form>
  </div>
</div>