如何手动将Angular表单字段设置为无效?

我正在处理登录表单，如果用户输入无效凭据，我们希望将电子邮件和密码字段都标记为无效，并显示登录失败的消息。我如何从一个可观察的回调设置这些字段无效?

模板:

<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之外，我还尝试设置电子邮件。valid标志为false，并设置loginForm。无效也为真。这些都不会导致输入显示其无效状态。

当前回答

虽然已经晚了，但下面的解决方案对我有用。

    let control = this.registerForm.controls['controlName'];
    control.setErrors({backend: {someProp: "Invalid Data"}});
    let message = control.errors['backend'].someProp;

2018-12-23 05:47:59

其他回答

我试图在模板形式的ngModelChange处理程序中调用setErrors()。它没有工作，直到我用setTimeout()等待一个滴答:

模板:

<input type="password" [(ngModel)]="user.password" class="form-control" 
 id="password" name="password" required (ngModelChange)="checkPasswords()">

<input type="password" [(ngModel)]="pwConfirm" class="form-control"
 id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
 #pwConfirmModel="ngModel">

<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
   Passwords do not match
</div>

组件:

@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;

checkPasswords() {
  if (this.pwConfirm.length >= this.user.password.length &&
      this.pwConfirm !== this.user.password) {
    console.log('passwords do not match');
    // setErrors() must be called after change detection runs
    setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
  } else {
    // to clear the error, we don't have to wait
    this.pwConfirmModel.control.setErrors(null);
  }
}

像这样的陷阱让我更喜欢反应式。

2018-04-14 21:59:02

对于单元测试:

spyOn(component.form, 'valid').and.returnValue(true);

2019-02-15 22:18:04

在material 2的新版本中，它的控件名称以mat前缀setErrors()开始不起作用，相反，Juila的答案可以更改为:

formData.form.controls['email'].markAsTouched();

2018-03-22 11:33:40

虽然已经晚了，但下面的解决方案对我有用。

    let control = this.registerForm.controls['controlName'];
    control.setErrors({backend: {someProp: "Invalid Data"}});
    let message = control.errors['backend'].someProp;

2018-12-23 05:47:59

补充茱莉亚·帕斯科娃的答案

在组件中设置验证错误:

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

清除组件中的验证错误:

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

使用null清除错误时要小心，因为这将覆盖所有错误。如果你想保留一些，你可能必须先检查是否存在其他错误:

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

2017-09-22 17:12:32

如何手动将Angular表单字段设置为无效?

推荐文章

最新文章

标签