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

Question

我正在处理登录表单,如果用户输入无效凭据,我们要将电子邮件和密码字段都标记为无效,并显示一条消息,指出登录失败.如何从可观察的回调中将这些字段设置为无效？

模板:

<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.这些都不会导致输入显示其无效状态.

Answer 1

在组件中:

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>

Answer 2

加入Julia Passynkova的回答

要在组件中设置验证错误:

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

要取消设置组件中的验证错误:

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

小心使用'null'取消设置错误,因为这会覆盖所有错误.如果你想保留一些,你可能必须首先检查是否存在其他错误:

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

Answer 3

在新版本的材料2中,其控件名称以mat前缀开头,setErrors()不起作用,而Juila的答案可以更改为:

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

Answer 4

我试图setErrors()在模板表单中调用ngModelChange处理程序.直到我等了一个勾号时它才起作用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);
  }
}

这样的问题让我更喜欢反应形式.

Answer 5

在我的反应式表单中，如果检查了另一个字段，我需要将一个字段标记为无效。在 ng 版本 7 中，我执行了以下操作：

    const checkboxField = this.form.get('<name of field>');
    const dropDownField = this.form.get('<name of field>');

    this.checkboxField$ = checkboxField.valueChanges
        .subscribe((checked: boolean) => {
            if(checked) {
                dropDownField.setValidators(Validators.required);
                dropDownField.setErrors({ required: true });
                dropDownField.markAsDirty();
            } else {
                dropDownField.clearValidators();
                dropDownField.markAsPristine();
            }
        });

因此，在上面，当我选中该框时，它会根据需要设置下拉菜单并将其标记为脏。如果您不这样标记，那么在您尝试提交表单或与其交互之前，它不会无效（错误）。

如果该复选框设置为 false（未选中），则我们清除下拉列表中所需的验证器并将其重置为原始状态。

另外 - 请记住取消订阅监视字段更改！

Answer 6

您还可以将 viewChild 'type' 更改为 NgForm，如下所示：

@ViewChild('loginForm') loginForm: NgForm;

然后以@Julia 提到的相同方式引用您的控件：

 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'].setErrors({ 'incorrect': true});
      this.loginForm.controls['password'].setErrors({ 'incorrect': true});
    });
  }

将 Errors 设置为 null 将清除 UI 上的错误：

this.loginForm.controls['email'].setErrors(null);