ログインフォームを作成しているのですが、ユーザーが無効な認証情報を入力した場合、emailとpasswordの両フィールドを無効とマークし、ログインに失敗したというメッセージを表示したいと考えています。observableコールバックからこれらのフィールドを無効に設定するにはどうすればよいでしょうか。
テンプレートです。
<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>
ログイン方法です。
@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;
});
}
入力の無効フラグをtrueに設定することに加えて、email.valid
フラグをfalseに設定したり、loginForm.invalid
をtrueに設定したりしてみました。いずれも入力が無効な状態で表示されることはありませんでした。
をコンポーネント化しました。
formData.form.controls['email'].setErrors({'incorrect': true});
となり、HTMLでは
<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email" #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>
Julia Passynkovaさんの回答を追加する
コンポーネントにバリデーションエラーを設定するには。
formData.form.controls['email'].setErrors({'incorrect': true});
コンポーネントのバリデーションエラーを解除するには
formData.form.controls['email'].setErrors(null);
null`を使ってエラーを解除すると、すべてのエラーが上書きされてしまうので注意が必要です。いくつかのエラーを残しておきたい場合は、最初に他のエラーが存在するかどうかをチェックする必要があるかもしれません。
if (isIncorrectOnlyError){
formData.form.controls['email'].setErrors(null);
}
コントロール名がmatの接頭辞で始まる新バージョンの素材2では、setErrors()は動作しません。代わりに、Juila'さんの回答を次のように変更できます。
formData.form.controls['email'].markAsTouched();