Wenn ich ein Formular über button type="submit" absende, erscheinen die Formularüberprüfungsmeldungen und alles ist in Ordnung. Wenn ich jedoch eine Schaltfläche (oder einen Link) mit (click)="myhandler()" habe, werden die Validierungen nicht angezeigt.
Wie kann ich entweder:
Hinweis: Dies sind einfache Validierungen wie für Eingabefelder erforderlich.
Beispielcode:
%Vor%Sie sollten die Schaltfläche deaktivieren, bis das Formular gültig ist. Ändern Sie also in Ihrem Fall das Tag zum Öffnen des Formularelements, um eine Variable für das Formular zu erstellen:
%Vor%und deaktivieren Sie die Schaltfläche, wenn das Formular nicht gültig ist
<button (click)="save()" [disabled]="!myForm.form.valid">Click 2</button>
Lassen Sie mich wissen, ob das funktioniert. Da das Formular selbst in jedem Fall automatisch und konstant überprüft wird, müssen Sie nicht dafür sorgen, dass es erledigt wird.
setze Bedingungen in die [hidden] -Direktive und ändere die submitted -Eigenschaft beim Senden auf true!
%Vor%%Vor%Programmatisch prüfen und mit Validierung deaktivieren
Arbeitsbeispiel Ссылка
Button mit dem Typ submit triggers form submit automatisch, ich denke, Sie müssen das Formular submit manuell auslösen:
%Vor%Warum "ngForm"? Die Eigenschaft exportAs einer Anweisung teilt Angular mit, wie eine lokale Variable mit der Anweisung verknüpft werden soll. Wir setzen den Namen auf ngForm, da die exportAs -Eigenschaft der NgControlName-Direktive "ngForm" ist.
Unter Code wird Ihnen helfen .. Getestet mit Angular 4 Neueste Version 4.2.4
%Vor%in Ihrer .ts Datei
%Vor%Bitte beachten Sie: Dieser Ansatz ist für reaktive Formen.
Ich habe die Eigenschaft markAsTouched() verwendet, um Validierungen bei einem Klick auf die Schaltfläche auszuführen.
Angenommen, die folgende Schaltfläche befindet sich außerhalb des Formulars:
%Vor% Wenn nun in der Methode validateForm das Formular ungültig ist, können Sie die Eigenschaft markAsTouched() für jedes Formularsteuerelement festlegen, und angular zeigt Validierungsnachrichten an.
vorausgesetzt, Sie haben Validierungsnachrichten in Ihrem HTML wie
eingerichtet %Vor%und Sie haben die Feldvalidierung in Ihrem Formulargruppen-Builder wie
benötigt %Vor%Tags und Links angular angular2-forms