![表单字段设置为无效]( "表单字段设置为无效")
本文介绍了如何手动将 Angular 表单字段设置为无效?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理一个登录表单，如果用户输入的凭据无效，我们希望将电子邮件和密码字段标记为无效并显示一条消息，指出登录失败.如何通过可观察回调将这些字段设置为无效?
模板:
<div class="login-content" fxLayout="column" fxLayoutAlign="开始拉伸"><md-输入-容器><input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"></md-input-container><md-输入-容器><input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password"></md-input-container><p class='error' *ngIf='loginFailed'>电子邮件地址或密码无效.</p><div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center"><md-checkbox class="remember-me">记住我</md-checkbox><a class="forgot-password" routerLink='/forgot-password'>忘记密码?</a>
<button class="login-button" md-raised-button [disabled]="!loginForm.valid">登录</button><p class="note">没有帐户?<br/><a [routerLink]="['/register']">点击这里创建一个</a></p>
</表单>
登录方式:
@ViewChild('loginForm') loginForm: HTMLFormElement;私人登录(formData:任何):无效{this.authService.login(formData).subscribe(res => {alert(`恭喜，你已经登录了.虽然我们现在没有任何地方可以发送给你，但无论如何恭喜你！`);}, 错误 =>{this.loginFailed = true;//这会显示错误消息，我真的不喜欢这样，但这是另一个问题.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>
I am working on a login form and if the user enters invalid credentials we want to mark both the email and password fields as invalid and display a message that says the login failed. How do I go about setting these fields to be invalid from an observable callback?
Template:
<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>
Login method:
@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;
});
}
In addition to setting the inputs invalid flag to true I've tried setting the email.valid flag to false, and setting the loginForm.invalid to true as well. None of these cause the inputs to display their invalid state.
解决方案
in component:
formData.form.controls['email'].setErrors({'incorrect': true});
and in HTML:
<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email" #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>
这篇关于如何手动将 Angular 表单字段设置为无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！