Add error handling for username and password input

src/app/login/login.component.html

-<mat-form-field class="input-block">
-  <input matInput #userName placeholder="Username"/>
-  <mat-error *ngIf="usernameErrorMessage !== ''">{{ usernameErrorMessage }}</mat-error>
-</mat-form-field>
+<form>
+  <mat-form-field class="input-block">
+    <input matInput #userName placeholder="Username" [formControl]="usernameFormControl" [errorStateMatcher]="matcher" name="username" />
+    <mat-error *ngIf="usernameFormControl.hasError('required')">Username is <strong>required</strong>.</mat-error>
+  </mat-form-field>
 
-<mat-form-field class="input-block">
-  <input matInput #userPassword type="password" placeholder="Password"/>
-  <mat-error *ngIf="passwordErrorMessage !== ''">{{ passwordErrorMessage }}</mat-error>
-</mat-form-field>
+  <mat-form-field class="input-block">
+    <input matInput #userPassword type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher" name="password" />
+    <mat-error *ngIf="passwordFormControl.hasError('required')">Password is <strong>required</strong>.</mat-error>
+  </mat-form-field>
 
-<button mat-raised-button color="primary" (click)="login(userName.value, userPassword.value)">Login</button>
+  <button mat-raised-button color="primary" (click)="login(userName.value, userPassword.value)">Login</button>
+</form>

src/app/login/login.component.ts

@@ -2,6 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { AuthenticationService } from '../authentication.service';
 import { Router } from '@angular/router';
 import { NotificationService } from '../notification.service';
+import { ErrorStateMatcher } from '@angular/material';
+import { FormControl, FormGroupDirective, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
+
+export class LoginErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
 
 @Component({
   selector: 'app-login',
@@ -10,8 +19,10 @@ import { NotificationService } from '../notification.service';
 })
 export class LoginComponent implements OnInit {
 
-  protected usernameErrorMessage = '';
-  protected passwordErrorMessage = '';
+  usernameFormControl = new FormControl('', [Validators.required]);
+  passwordFormControl = new FormControl('', [Validators.required]);
+
+  matcher = new LoginErrorStateMatcher();
 
   constructor(public authenticationService: AuthenticationService,
               public router: Router,
@@ -25,14 +36,8 @@ export class LoginComponent implements OnInit {
     username = username.trim();
     password = password.trim();
 
-    if (username === '') {
-      // ToDo: Handle username and password not correct event
-      this.usernameErrorMessage = 'Username is required';
-    } else if (password === '') {
-      this.passwordErrorMessage = 'Password is required';
-    } else {
+    if (username !== '' && password !== '') {
       this.authenticationService.login(username, password).subscribe(loginSuccessful => {
-        console.log(loginSuccessful);
         if (loginSuccessful) {
           this.notificationService.show('Login successful!');
           this.router.navigate(['rooms']);