Implement functionality for Input-field at gamesearch

src/app/app.module.ts

@@ -17,6 +17,7 @@ import {MatCardModule} from '@angular/material/card';
 import { OverviewComponent } from './overview/overview.component';
 import { ErrorComponent } from './error/error.component';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     MatInputModule,
     MatCardModule,
     MatProgressSpinnerModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/select-game/select-game.component.html

@@ -8,18 +8,18 @@
   <br>
   <mat-card class="transparent">
     <mat-card-title>Spielsuche</mat-card-title>
-    <mat-card-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues</mat-card-subtitle>
+    <mat-card-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues Spiel</mat-card-subtitle>
     <mat-card-content>
       <form>
         <mat-form-field>
           <mat-label>Spielname</mat-label>
-          <input type="text" pattern="[0-9A-Za-z]*" matInput>
+          <input #spielname type="text" matInput (keyup)="checkSpielname(spielname.value)" (keypress)="keyPressAlphaNumeric($event)">
         </mat-form-field>
       </form>
     </mat-card-content>
     <mat-card-actions>
-      <button mat-raised-button color="primary" (click)="getSpielSessions()">Spiel erstellen</button>
-      <button mat-raised-button color="primary" (click)="joinGame($event)">Spiel beitreten</button>
+      <button [disabled]="buttonsDisabled" mat-raised-button color="primary" (click)="getSpielSessions()">Spiel erstellen</button>
+      <button [disabled]="buttonsDisabled" mat-raised-button color="primary" (click)="joinGame()">Spiel beitreten</button>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/select-game/select-game.component.ts

@@ -9,6 +9,7 @@ import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 })
 export class SelectGameComponent implements OnInit {
 
+  buttonsDisabled = true;
   constructor(private router: Router,
               private server: TabuMiddlewareService) { }
 
@@ -21,7 +22,21 @@ export class SelectGameComponent implements OnInit {
     console.log('Response:', response);
   }
 
-  joinGame(event: any): void {
+  joinGame(): void {
     this.router.navigate(['/overview']);
   }
+
+  keyPressAlphaNumeric(event: KeyboardEvent): boolean {
+    if (/[a-zA-Z0-9]/.test(event.key)) {
+      return true;
+    } else {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  checkSpielname(spielname: string): void {
+    console.log(spielname)
+    this.buttonsDisabled = spielname.length === 0;
+  }
 }