Newer
Older
<div fxLayout="column" fxLayoutAlign="center center" fxlayoutgap="50px" fxFill>
<form (ngSubmit)="joinRoom(roomId.value)">
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
<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>
<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>