如何手动将角度表单字段设置为无效？

我正在使用登录表单，如果用户输入无效的凭据，我们要将电子邮件和密码字段标记为无效，并显示一条消息，指出登录失败。我如何着手将这些字段设置为可观察回调无效？如何手动将角度表单字段设置为无效？

模板：

<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也是如此。这些都不会导致输入显示无效状态。

来源

2017-04-21 efarley

你的后端是否在角度以外的端口？如果是这可能是一个CORS问题。你在后端使用什么框架。 – Drew1208

您可以使用'setErros'方法。提示：您应该在组件文件中添加必需的验证器。也有一个具体的原因使用ngModel反应形式？ – developer033

在组件

：

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>

来源

2017-04-22 01:23:05

你以后如何删除错误？ 'setErrors（{“不正确”：假}）'或'setErrrors（{}）'是不是为我工作 – Robouste

我可以设置整个反应形式为有效或无效，而不是重置领域？ – xtremist

添加到朱莉娅Passynkova的回答

要设置验证错误的组件：

formData.form.controls['email'].setErrors({'incorrect': true});

要取消验证错误在组件：

formData.form.controls['email'].setErrors(null);

小心使用“空”，因为这将覆盖所有的错误取消设置错误。如果你想保留一些你可能需要首先检查是否存在其他错误：

if(isIncorrectOnlyError){ 
    formData.form.controls['email'].setErrors(null); 
}

来源

2017-09-22 17:12:32

如何手动将角度表单字段设置为无效？

回答

相关问题