[解決済み] Angularフォームフィールドを手動で無効に設定するにはどうすればよいですか？

質問

ログインフォームを作成していますが、ユーザーが無効な認証情報を入力した場合、メールアドレスとパスワードの両方のフィールドを無効とマークし、ログインに失敗したというメッセージを表示したいのですが、どうすればよいでしょうか。これらのフィールドをobservableコールバックから無効に設定するには、どうすればよいでしょうか？

テンプレートです。

<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に設定することもできます。いずれも、入力が無効な状態を表示することはありません。

解決方法は？

をコンポーネントに追加してください。

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>