diff --git a/src/app/room-creation/room-creation.component.html b/src/app/room-creation/room-creation.component.html index 23b91198447d7634d77c4b21d18aeae6b0b39ae4..ce4e95097d8a1b5594d085265f6cf4e88678ee36 100644 --- a/src/app/room-creation/room-creation.component.html +++ b/src/app/room-creation/room-creation.component.html @@ -1,20 +1,23 @@ <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> diff --git a/src/app/room-creation/room-creation.component.ts b/src/app/room-creation/room-creation.component.ts index dddc2900b19009c4d8cffbc99bbbc74415fd0480..cc79c96efce93d73e2136ecd734d236e399929a5 100644 --- a/src/app/room-creation/room-creation.component.ts +++ b/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)