Ich arbeite an einem Anmeldeformular. Wenn der Benutzer ungültige Anmeldeinformationen eingibt, möchten wir sowohl das E-Mail- als auch das Kennwortfeld als ungültig markieren und eine Meldung anzeigen, dass die Anmeldung fehlgeschlagen ist. Wie gehe ich vor, um diese Felder nach einem beobachtbaren Rückruf als ungültig festzulegen?
Vorlage:
<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
<div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
<md-input-container>
<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
</md-input-container>
<md-input-container>
<input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
</md-input-container>
<p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
<div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
<md-checkbox class="remember-me">Remember Me</md-checkbox>
<a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
</div>
<button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
<p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
</div>
</form>
Anmeldemethode:
@ViewChild('loginForm') loginForm: HTMLFormElement;
private login(formData: any): void {
this.authService.login(formData).subscribe(res => {
alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
}, error => {
this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.
this.loginForm.controls.email.invalid = true;
this.loginForm.controls.password.invalid = true;
});
}
Zusätzlich zum Setzen des ungültigen Eingangsflags auf true habe ich versucht, das email.valid
Flag auf false und das loginForm.invalid
auf true zu setzen. Keine dieser Aktionen bewirkt, dass die Eingaben ihren ungültigen Status anzeigen.
validation
angular
angular2-forms
Efarley
quelle
quelle
setErros
Methode verwenden. Tipps: Sie sollten den erforderlichen Validator zu Ihrer Komponentendatei hinzufügen. Gibt es auch einen bestimmten Grund, ngModel mit reaktiven Formen zu verwenden?Antworten:
in Komponente:
und in HTML:
quelle
setErrors({'incorrect': false})
odersetErrrors({})
arbeiten nicht für michsetErrrors(null)
formData.form.controls['email'].markAsTouched();
das unten erwähnte @ M.Farahmand. Verwenden SiesetErrors({'incorrect': true})
einfach dieng-invalid
CSS-Klasse für die Eingabe. Ich hoffe es hilft jemandem.Hinzufügen zu Julia Passynkovas Antwort
So legen Sie einen Validierungsfehler in der Komponente fest:
So deaktivieren Sie den Validierungsfehler in der Komponente:
Seien Sie vorsichtig beim Deaktivieren der Fehler mit,
null
da dadurch alle Fehler überschrieben werden. Wenn Sie einige behalten möchten, müssen Sie möglicherweise zuerst prüfen, ob andere Fehler vorliegen:quelle
Ich habe versucht,
setErrors()
einen ngModelChange-Handler in einem Vorlagenformular aufzurufen. Es hat nicht funktioniert, bis ich einen Tick gewartet habe mitsetTimeout()
:Vorlage:
Komponente:
Solche Fallstricke lassen mich reaktive Formen bevorzugen.
quelle
Cannot find name 'NgModel'.
Fehler für Zeile@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;
jede Korrektur für dieses ProblemsetErrors
aber es funktionierte nicht, bis ich es benutztesetTimeout
In der neuen Version von Material 2, dessen Kontrollname mit dem Mattenpräfix setErrors () beginnt, funktioniert dies nicht. Stattdessen kann Juilas Antwort wie folgt geändert werden:
quelle
Hier ist ein Beispiel, das funktioniert:
quelle
In meinem reaktiven Formular musste ich ein Feld als ungültig markieren, wenn ein anderes Feld aktiviert war. In ng Version 7 habe ich folgendes gemacht:
Wenn ich das Kontrollkästchen aktiviere, wird das Dropdown-Menü wie erforderlich festgelegt und als verschmutzt markiert. Wenn Sie es nicht als solches markieren, wird es (irrtümlich) nicht ungültig, bis Sie versuchen, das Formular zu senden oder mit ihm zu interagieren.
Wenn das Kontrollkästchen auf false gesetzt ist (nicht aktiviert), löschen wir den erforderlichen Validator in der Dropdown-Liste und setzen ihn auf einen makellosen Zustand zurück.
Denken Sie auch daran, sich von der Überwachung von Feldänderungen abzumelden!
quelle
Sie können den viewChild-Typ auch wie folgt in NgForm ändern:
Und dann verweisen Sie auf Ihre Steuerelemente auf die gleiche Weise, wie @Julia es erwähnt hat:
Wenn Sie die Fehler auf null setzen, werden die Fehler auf der Benutzeroberfläche behoben:
quelle
Obwohl seine späte, aber folgende Lösung von mir aus funktioniert hat.
quelle
Für Unit-Test:
quelle