Ich implementiere Login-Seite mit angular reaktiven Formen. Die Schaltfläche "Login" ist deaktiviert, wenn das Formular ungültig ist.
%Vor%Also, wenn ich es im Browser starte, habe ich die Felder "userName" und "passwords" ausgefüllt. Und in der Konsole habe ich die Werte "{userName:" [email protected] ", password:" "}" und als Ergebnis ist die Schaltfläche "login" deaktiviert. Aber wenn ich irgendwo auf die Seite klicke, wird onValueChanged ausgelöst und ich sehe '{userName: "[email protected]", password: "123456"}' , und button " Login "ist aktiviert.
Wenn ich im Inkognito-Modus gehe. Ich habe keine vorher ausgefüllten Felder (sie sind leer), aber wenn ich Werte ausfülle (auswähle), sehe ich in der Konsole '{userName: "[email protected]", Passwort: "123456"}' , und die Schaltfläche "Login" ist ohne zusätzlichen Klick aktiviert.
Mögen sie verschiedene Ereignisse sein? Autofill und Autocomplete? Und angular arbeitet mit ihnen anders?
Was ist der beste Weg, um es zu lösen? Und warum die Funktion onValueChanged nur einmal ausgeführt wird, wenn der Browser Felder automatisch ausfüllt?
Das Problem im Chrome-Browser: Es erlaubt keinen Zugriff auf den Wert des Passwortfelds nach dem automatischen Ausfüllen (vor dem Klicken auf die Seite durch den Benutzer). Es gibt also zwei Möglichkeiten:
Ich hatte das gleiche Problem mit Chrome v58.0.3029.96. Hier ist meine Problemumgehung, um Validierung und Autovervollständigung zu behalten:
%Vor%Und in meinem html:
%Vor%Ich hoffe, es hilft.
Hinweis : vm ist in UIComponentBase definiert und bezieht sich auf das View-Modell SigninViewModel meiner Komponente. Die Instanz FormGroup ist im View-Modell definiert, da die Geschäftslogik streng von der Ansicht in meiner Anwendung getrennt ist.
AKTUALISIEREN
Seit v59 scheint das Fokusereignis der Eingabe ausgelöst zu werden, wenn Felder automatisch ausgefüllt werden. Die obige Problemumgehung funktioniert nicht mehr. Hier ist die aktualisierte Problemumgehung, mit einem Timeout zu bestimmen, ob Felder durch die automatische Vervollständigung oder vom Benutzer aktualisiert werden (ich habe keinen besseren Weg gefunden):
%Vor%Und in meinem html:
%Vor%Der Vollständigkeit halber: Ich habe ein nicht reaktives Anmeldeformular.
%Vor% Wenn ich [(ngModel)]="username" verwende, wird die Variable username der zugehörigen Komponente nicht gefüllt, wenn die Funktion autofill des Browsers aktiviert wird.
Daher arbeite ich stattdessen mit ViewChild:
%Vor%Auf diese Weise kann ich auf die vom Browser bereitgestellten Werte zugreifen, sobald der Benutzer auf Login klickt.
Ich machte eine Funktion
formIsValid(): boolean{
return this.form.valid;
}
und dann zu der Schaltfläche hinzufügen:
%Vor%Es hat für mich funktioniert
Tags und Links angular typescript autofill autocomplete