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

74

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?

Chrillewoodz
quelle

Antworten:

180

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.

Chrillewoodz
quelle
1
@EduardoOliveira Ja, aber Sie können trotzdem wechseln + eingeben.
Chrillewoodz
3
Immer noch nützlich für Angular 6 oder 7 Benutzer :)
KCarnaille
2
Für das Problem mit dem Textbereich: Wenn Sie (keyup.enter) = "$ event.stopPropagation ()" und (keypress.enter) = "$ event.stopPropagation ()" im <textarea> verwenden, kann der Benutzer weiterhin neue Zeilen ohne eingeben Umschalt + Eingabe und sollte das Absenden des Formulars verhindern.
Stephen Kaiser
@Chrillewoodz danke für das Teilen dieses Codes. Grundsätzlich wollte ich das Senden von Formularen vermeiden, wenn jemand in einem bestimmten Feld die Eingabetaste drückt. Deshalb wurde das Formularfeld nicht im Formular hinzugefügt, und es funktioniert für mich wie ein Zauber.
Dinesh Gopal Chand
25

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 .

Bharatpatel
quelle
Sie können ein Klickereignis hinzufügen, und Sie können tun, was immer Sie wollen. Wenn Sie ein Formular-Tag in eckigen ts-Dateien möchten, können Sie @ViewChild verwenden. Gehen Sie die Angular2 + -Theorie durch.
Bharatpatel
3
Ich benutze dies: <form #ngForm="ngForm"><button (click)="ngForm.onSubmit()>SUBMIT</button></form>"mit reaktiven Formen.
Benjamin M
1
@BenjaminM Wenn Sie das Formular type = 'button' nicht bestehen, wird es gesendet, wenn Sie in einem Eingabefeld auf die Eingabetaste klicken. Daher ist es besser, die Schaltfläche mit dem Typattribut zu verwenden.
Bharatpatel
2
Diese Lösung hat bei mir funktioniert: beseitigt das
Senden
1
@Chrillewoodz Mit dem Viewchild-Objekt des Formulars können Sie es auch dann als gesendet markieren, wenn Sie es benötigen.
Bharatpatel
19

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;
    }
  }
user3866483
quelle
1
Würde dies nicht immer noch das Absenden des Formulars auslösen?
Chrillewoodz
3

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>
RM Shahidul Islam Shahed
quelle
2

Hatte das gleiche Problem, das hat mir geholfen:

<button type="submit" [disabled]="!myForm.valid">Save</button>
Kikaxa
quelle
5
Dies würde für die Frage des OP nicht funktionieren. Dadurch wird die Schaltfläche "Senden" nur deaktiviert, bis das Formular gültig ist. Sobald gültige Daten in das Eingabefeld eingegeben und Entergedrückt wurden, wird das Formular gesendet.
Benny
2

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

Péter Baráth
quelle
1

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.

Syjmick
quelle
0

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">

Anuj
quelle