如何手动将角度形式字段设置为无效？

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; 
    });
  }

除了将inputs invalid（输入无效）标志设置为true之外，我还尝试将email.valid标志设置为false，并将loginForm.invalid设置为true。所有这些都不会导致输入显示其无效状态。

Answer 1

在material 2的新版本中，其控制名称以mat前缀setErrors（）开头的控件不起作用，相反，Juila的答案可以更改为：

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

Answer 2

补充朱莉娅·帕辛科娃的答案

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

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

要取消组件中的验证错误：

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

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

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

Answer 3

在组件中：

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

用超文本标记语言：

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>