Winkel 2 verhindert, dass die Eingabe in vorlagengesteuerter Form gesendet wird

Ich habe Formulare, die den vorlagengesteuerten Entwurf verwenden, also ungefähr so:

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

Wie kann ich nun verhindern, dass ENTER das Formular sendet? Dies beeinträchtigt das benutzerdefinierte ENTER-Verhalten innerhalb des Formulars und auch, wenn Sie versehentlich die Eingabetaste in einer unerwünschten Eingabe drücken.

Ich habe mich umgesehen und einige alte Angular 1-Antworten und auch einige Standard-JavaScript-Antworten gefunden, aber ich bin der Meinung, dass Angular 2 so etwas bereits eingebaut haben muss, aber ich konnte es nicht finden.

Wenn nicht, was wäre der beste Weg, um dies zu erreichen?

Es stellt sich heraus, dass Sie etwas so Einfaches verwenden können wie:

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

Um zu verhindern, dass das Formular bei ENTER gesendet wird.

Ich weiß, dass ich zu spät komme, aber vielleicht habe ich die richtige Lösung dafür,

Wenn Sie < button> verwenden, definieren Sie einfach

<button type="button">

lieber nicht definieren oder als type = "submit" definieren, denn wenn Sie es nicht definieren, wird Ihr Formular gesendet.

Gleiches wenn du verwendest <input>dann auch definieren

<input type="button"> 

und das wird funktionieren.

- Bearbeitet als @Chrillewoodz Kommentar.

Wenn Sie beim Senden / Klicken einen bestimmten Prozess ausführen möchten, können Sie der Schaltfläche ein Klickereignis hinzufügen und so tun, was immer Sie möchten.

Wenn Sie ein Formular-Tag in eckigen ts-Dateien möchten, können Sie @ViewChild verwenden .

Sie können Folgendes ändern, damit die Eingabetaste in Textbereichen funktioniert, das Senden von Formularen jedoch verhindert wird:

In der HTML-Vorlage:

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

In der Klasse der Komponente im .ts-Code dahinter:

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

Winkel: 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>

Hatte das gleiche Problem, das hat mir geholfen:

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

Verwenden:

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

Und es verhindert, dass das Tag und die Inhalte dieses Tags Enter und Shift + Enter senden .

Zum Beispiel: Es hat bei mir funktioniert:

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

Und danach wird verhindert, dass alles unter diesem Beispiel-Div Enter und Shift + Enter sendet .

Weitere Informationen zu Schlüsselkombinationen: https://alligator.io/angular/binding-keyup-keydown-events/#key-combinations

Das hat mir geholfen:

• Die Schaltfläche, die als Übermittlung fungieren muss, sollte sein type="button"
• Diese Schaltfläche sollte (click)="onSubmit()"<- die Methode haben, die aufgerufen wird
• und Sie können also entfernen (ngSubmit)="onSubmit()"aus <form [formGroup]="form" (ngSubmit)="onSubmit()">

Ich bin nicht sicher, ob das Entfernen (ngSubmit)aus dem Formular Nebenwirkungen hat . Übrigens: Das habe ich beobachtet

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

benutzerdefinierte Validatoren deaktiviert haben.

Angular 6.x + Gehen Sie folgendermaßen vor, um die Eingabe einer bestimmten Eingabe zu verhindern:

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