如何手动将角表单字段设置为无效？
如何手动将角表单字段设置为无效？
提问于 2017-04-21 23:39:59
我正在处理一个登录表单，如果用户输入无效的凭据，我们希望将电子邮件和密码字段标记为无效，并显示一条消息，显示登录失败。如何将这些字段设置为从可观察的回调中无效？
模板：
<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。所有这些都不会导致输入显示其无效状态。
回答 10
Stack Overflow用户
回答已采纳
发布于 2017-04-22 01:23:05
构成部分：
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>Stack Overflow用户
发布于 2017-09-22 17:12:32
增加Julia Passynkova的答案
要在组件中设置验证错误，请执行以下操作：
formData.form.controls['email'].setErrors({'incorrect': true});若要取消组件中的验证错误，请执行以下操作：
formData.form.controls['email'].setErrors(null);请注意使用null取消错误设置，因为这将覆盖所有错误。如果您想保留一些错误，您可能必须首先检查是否存在其他错误：
if (isIncorrectOnlyError){
formData.form.controls['email'].setErrors(null);
}Stack Overflow用户
发布于 2018-03-22 11:33:40
在新版本的资料2中，它的控制名以mat前缀setErrors()开头不起作用，相反，Juila的答案可以更改为：
formData.form.controls['email'].markAsTouched();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43553544
复制相关文章
相似问题
腾讯云开发者
