From b677f87a6f9806d8e8056a4f042d05821bcc582a 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)
---
.../room-creation/room-creation.component.html | 17 ++++++++++-------
.../room-creation/room-creation.component.ts | 5 +++++
2 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/src/app/room-creation/room-creation.component.html b/src/app/room-creation/room-creation.component.html
index 23b911984..ce4e95097 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 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