如何手动将角度表单字段设置为无效?
问题描述:
我正在使用登录表单,如果用户输入无效的凭据,我们要将电子邮件和密码字段标记为无效,并显示一条消息,指出登录失败。我如何着手将这些字段设置为可观察回调无效?如何手动将角度表单字段设置为无效?
模板:
<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;
});
}
除了无效标志设置输入真实的我已经试过了email.valid
标志设置为false,并设置loginForm.invalid
也是如此。这些都不会导致输入显示无效状态。
答
在组件
:
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>
答
添加到朱莉娅Passynkova的回答
要设置验证错误的组件:
formData.form.controls['email'].setErrors({'incorrect': true});
要取消验证错误在组件:
formData.form.controls['email'].setErrors(null);
小心使用“空”,因为这将覆盖所有的错误取消设置错误。如果你想保留一些你可能需要首先检查是否存在其他错误:
if(isIncorrectOnlyError){
formData.form.controls['email'].setErrors(null);
}
你的后端是否在角度以外的端口?如果是这可能是一个CORS问题。你在后端使用什么框架。 – Drew1208
您可以使用'setErros'方法。提示:您应该在组件文件中添加必需的验证器。也有一个具体的原因使用ngModel反应形式? – developer033