room-join.component.html

<div fxLayout="column" fxLayoutAlign="center center" fxlayoutgap="50px" fxFill>
<form (ngSubmit)="joinRoom(roomId.value)">
  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
    <mat-form-field>
      <input matInput #roomId type="text" pattern="[0-9 ]*" 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('pattern')">{{ 'home-page.only-numbers' | translate}}</mat-error>
    </mat-form-field>
    <button mat-fab color="accent" type="submit">
      <mat-icon>input</mat-icon>
    </button>
  </div>
</form>
<button mat-button class="demo" color="primary" (click)="joinDemo()">Demo Session</button>
</div>