Fix input field, so that the number is splitted in two 4-digit-blocks

src/app/components/shared/room-join/room-join.component.html

@@ -2,9 +2,11 @@
 <form (ngSubmit)="joinRoom(roomId.value)">
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
     <mat-form-field>
-      <input matInput #roomId type="number" min="00000000" max="99999999" onkeydown="if(this.value.length === 8 && event.keyCode != 8) return false;" placeholder="Session-Id" [formControl]="roomFormControl"
-             [errorStateMatcher]="matcher"/>
-      <mat-hint align="end">{{roomId.value.split(' ').join(' ').length}} / 8</mat-hint>
+      <input matInput #roomId type="text" inputmode="numeric" min="00000000" max="99999999" 
+             onkeydown="if(this.value.length - (this.value.split(' ').length -1) === 8 && event.keyCode != 8) return false;
+                        if(this.value.length === 4 && event.keyCode != 8) this.value = this.value + ' ';" 
+                        placeholder="Session-Id" [formControl]="roomFormControl" [errorStateMatcher]="matcher"/>
+      <mat-hint align="end">{{ roomId.value.length - (roomId.value.split(' ').length -1) }} / 8</mat-hint>
       <mat-error *ngIf="roomFormControl.hasError('required')">{{ 'home-page.please-enter' | translate}}</mat-error>
       <mat-error *ngIf="roomFormControl.hasError('minlength')">{{ 'home-page.exactly-8' | translate}}</mat-error>
     </mat-form-field>

src/app/components/shared/room-join/room-join.component.ts

@@ -29,8 +29,8 @@ export class RoomJoinComponent implements OnInit {
   room: Room;
   demoId = '95680586';
   user: User;
-  
-  roomFormControl = new FormControl('', [Validators.required, Validators.minLength(8), Validators.maxLength(8)]);
+
+  roomFormControl = new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(9)]);
 
   matcher = new RegisterErrorStateMatcher();
 
@@ -46,7 +46,7 @@ export class RoomJoinComponent implements OnInit {
   }
 
   getRoom(id: string): void {
-    this.roomService.getRoomByShortId(id)
+    this.roomService.getRoomByShortId(id.replace(/\s/g, ""))
       .subscribe(room => {
         this.room = room;
         if (!room) {