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?
angular
angular2-forms
Chrillewoodz
quelle
quelle
Ich weiß, dass ich zu spät komme, aber vielleicht habe ich die richtige Lösung dafür,
Wenn Sie <
button
> verwenden, definieren Sie einfachlieber nicht definieren oder als type = "submit" definieren, denn wenn Sie es nicht definieren, wird Ihr Formular gesendet.
Gleiches wenn du verwendest
<input>
dann auch definierenund 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 .
quelle
<form #ngForm="ngForm"><button (click)="ngForm.onSubmit()>SUBMIT</button></form>"
mit reaktiven Formen.Sie können Folgendes ändern, damit die Eingabetaste in Textbereichen funktioniert, das Senden von Formularen jedoch verhindert wird:
In der HTML-Vorlage:
In der Klasse der Komponente im .ts-Code dahinter:
quelle
Winkel: 8.2.11
quelle
Hatte das gleiche Problem, das hat mir geholfen:
quelle
Enter
gedrückt wurden, wird das Formular gesendet.Verwenden:
Und es verhindert, dass das Tag und die Inhalte dieses Tags Enter und Shift + Enter senden .
Zum Beispiel: Es hat bei mir funktioniert:
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
quelle
Das hat mir geholfen:
type="button"
(click)="onSubmit()"
<- die Methode haben, die aufgerufen wird(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 beobachtetbenutzerdefinierte Validatoren deaktiviert haben.
quelle
Angular 6.x + Gehen Sie folgendermaßen vor, um die Eingabe einer bestimmten Eingabe zu verhindern:
quelle