From 6f4ee2c74c01e3bb58b8eafcd3d366dc68afffc0 Mon Sep 17 00:00:00 2001
From: Thomas Lenz <Thomas.Lenz@mni.thm.de>
Date: Fri, 9 Mar 2018 19:32:19 +0100
Subject: [PATCH] Implement check for valid inputs (no empty input-fields
allowed)
---
src/app/room-creation/room-creation.component.html | 14 ++++++++------
src/app/room-creation/room-creation.component.ts | 5 +++++
2 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/src/app/room-creation/room-creation.component.html b/src/app/room-creation/room-creation.component.html
index 35313ed52..958436491 100644
--- a/src/app/room-creation/room-creation.component.html
+++ b/src/app/room-creation/room-creation.component.html
@@ -1,19 +1,21 @@
<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 dddc2900b..cc79c96ef 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)
--
GitLab