Implement check for valid inputs (no empty input-fields allowed)

src/app/room-creation/room-creation.component.html

 <form (ngSubmit)="addRoom(longRoomName.value, shortRoomName.value)">
   <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
     <mat-form-field>
-      <input matInput #longRoomName class="input-block" type="text" placeholder="Name" maxlength="50"
+      <input (keypress)="resetEmptyInputs()" matInput #longRoomName class="input-block" type="text" placeholder="Name"
+             maxlength="50"
              [(ngModel)]="longName"/>
-      <mat-hint align="start"><strong>Max. letters / signs:</strong></mat-hint>
-      <mat-hint align="end">{{longRoomName.value.length}} / 50</mat-hint>
+      <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+      <mat-hint align="end" *ngIf="!emptyInputs">{{longRoomName.value.length}} / 50</mat-hint>
+      <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
       <button mat-button *ngIf="longName" matSuffix mat-icon-button aria-label="Clear" (click)="longName=''">
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
-
     <mat-form-field>
-      <input matInput #shortRoomName class="input-block" type="text" placeholder="Short name" maxlength="8"
+      <input (keypress)="resetEmptyInputs()" matInput #shortRoomName class="input-block" type="text"
+             placeholder="Short name" maxlength="8"
              [(ngModel)]="shortName"/>
-      <mat-hint align="start"><strong>Max. letters / signs:</strong></mat-hint>
-      <mat-hint align="end">{{shortRoomName.value.length}} / 8</mat-hint>
+      <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+      <mat-hint align="end" *ngIf="!emptyInputs">{{shortRoomName.value.length}} / 8</mat-hint>
+      <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
       <button mat-button *ngIf="shortName" matSuffix mat-icon-button aria-label="Clear" (click)="shortName=''">
         <mat-icon>close</mat-icon>
       </button>

src/app/room-creation/room-creation.component.ts

@@ -13,6 +13,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 export class RoomCreationComponent implements OnInit {
   longName: string;
   shortName: string;
+  emptyInputs = false;
 
   constructor(private roomService: RoomService,
               private router: Router,
@@ -27,11 +28,15 @@ export class RoomCreationComponent implements OnInit {
 
   ngOnInit() {
   }
+  resetEmptyInputs(): void {
+    this.emptyInputs = false;
+  }
 
   addRoom(longRoomName: string, shortRoomName: string) {
     longRoomName = longRoomName.trim();
     shortRoomName = shortRoomName.trim();
     if (!longRoomName || !shortRoomName) {
+      this.emptyInputs = true;
       return;
     }
     this.roomService.addRoom({ name: longRoomName, abbreviation: shortRoomName } as Room)