Merge pull request #83 from balcirakpeter/inputValidation

Input validation for create and update
VECTOUN · Dec 18, 2017 · 4484db7 · 4484db7
2 parents 80b6e28 + e478b07
commit 4484db7
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 22 deletions.
diff --git a/creatures-hunting-angular/src/app/manager/area-create/area-create.component.html b/creatures-hunting-angular/src/app/manager/area-create/area-create.component.html
@@ -1,7 +1,13 @@
 <mat-card class="main-card mat-elevation-z4" >
   <div>
     <mat-form-field>
-      <input matInput #name  placeholder="Name" >
+      <input matInput #name  placeholder="Name" required pattern="^[a-zA-Z]+$" [formControl]="nameFormControl">
+      <mat-error *ngIf="nameFormControl.hasError('pattern') && !nameFormControl.hasError('required')">
+        This is not valid name!
+      </mat-error>
+      <mat-error *ngIf="nameFormControl.hasError('required')">
+        Name is required!
+      </mat-error>
     </mat-form-field>
   </div>
   <div>
@@ -17,7 +23,8 @@
   </div>
 
   <button mat-raised-button color="primary" routerLink="/pa165/areas">Back</button>
-  <button mat-raised-button color="primary" (click)="createArea(name.value, areaType)">Create</button>
+  <button mat-raised-button color="primary" [disabled]="!nameFormControl.valid"
+          (click)="createArea(name.value, areaType)">Create</button>
 
 
 </mat-card>
diff --git a/creatures-hunting-angular/src/app/manager/area-create/area-create.component.ts b/creatures-hunting-angular/src/app/manager/area-create/area-create.component.ts
@@ -5,6 +5,7 @@ import {Router} from "@angular/router";
 import {Area} from "../../entity.module";
 import {CookieService} from "ngx-cookie-service";
 import {ApplicationConfig, CONFIG_TOKEN} from "../../app-config";
+import {FormControl, Validators} from "@angular/forms";
 @Component({
   selector: 'app-area-create',
   templateUrl: './area-create.component.html',
@@ -14,6 +15,7 @@ export class AreaCreateComponent implements OnInit {
 
   cookie: boolean = false;
   areaType: string;
+  nameFormControl: FormControl;
 
   type: string;
 
@@ -26,6 +28,9 @@ export class AreaCreateComponent implements OnInit {
   ngOnInit() {
     this.cookie = this.cookieService.check('creatures-token');
     this.checkIfCookieExist();
+    this.nameFormControl = new FormControl('', [
+      Validators.required,
+    ]);
   }
 
   checkIfCookieExist() {

diff --git a/creatures-hunting-angular/src/app/manager/area-detail/area-detail.component.html b/creatures-hunting-angular/src/app/manager/area-detail/area-detail.component.html
@@ -6,7 +6,13 @@
   <div>
     <div>
       <mat-form-field>
-        <input matInput #name  placeholder="Name" value="{{area.name}}" disabled="{{!isAdmin}}" class="attribute">
+        <input matInput #name  placeholder="Name" value="{{area.name}}" disabled="{{!isAdmin}}" class="attribute" pattern="^[a-zA-Z]+$" [formControl]="nameFormControl">
+        <mat-error *ngIf="nameFormControl.hasError('pattern') && !nameFormControl.hasError('required')">
+          This is not valid name!
+        </mat-error>
+        <mat-error *ngIf="nameFormControl.hasError('required') && nameFormControl.dirty">
+          Name is required!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
@@ -21,7 +27,8 @@
       </mat-form-field>
     </div>
 
-    <button *ngIf="isAdmin" mat-raised-button color="primary" (click)="updateArea(name.value, areaType)">Update</button>
+    <button *ngIf="isAdmin" mat-raised-button color="primary" [disabled]="!nameFormControl.valid && nameFormControl.dirty"
+            (click)="updateArea(name.value, areaType)">Update</button>
     <button mat-raised-button color="primary" (click)="showMonsters()">Add spotted monster</button>
 
 

diff --git a/creatures-hunting-angular/src/app/manager/area-detail/area-detail.component.ts b/creatures-hunting-angular/src/app/manager/area-detail/area-detail.component.ts
@@ -6,6 +6,7 @@ import {MatDialog, MatTableDataSource} from "@angular/material";
 import {CookieService} from "ngx-cookie-service";
 import {AddMonstersToAreaComponent} from "../../add-monsters-to-area-dialog/add-monsters-to-area-dialog.component";
 import {ApplicationConfig, CONFIG_TOKEN} from "../../app-config";
+import {FormControl, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-area-detail',
@@ -21,6 +22,7 @@ export class AreaDetailComponent implements OnInit {
   areaType: string;
   monsters: Monster[] = [];
   dataSource: MatTableDataSource<Monster>;
+  nameFormControl: FormControl;
 
   isAdmin: boolean = false;
 
@@ -40,6 +42,9 @@ export class AreaDetailComponent implements OnInit {
     this.cookie = this.cookieService.check('creatures-token');
     this.checkIsAdminCookie();
     this.loadData();
+    this.nameFormControl = new FormControl('', [
+      Validators.required,
+    ]);
   }
 
   checkIfCookieExist(){

diff --git a/creatures-hunting-angular/src/app/manager/monster-create/monster-create.component.html b/creatures-hunting-angular/src/app/manager/monster-create/monster-create.component.html
@@ -2,17 +2,29 @@
   <div>
     <div>
       <mat-form-field>
-        <input matInput #name placeholder="Name" c>
+        <input matInput #name placeholder="Name" required pattern="^[a-zA-Z]+$" [formControl]="nameFormControl">
+        <mat-error *ngIf="nameFormControl.hasError('pattern') && !nameFormControl.hasError('required')">
+          This is not valid name!
+        </mat-error>
+        <mat-error *ngIf="nameFormControl.hasError('required')">
+          Name is required!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
       <mat-form-field>
-        <input matInput #height placeholder="Height" >
+        <input matInput #height placeholder="Height" pattern="^(([0-9]+\.[0-9]*)|([0-9]*\.[0-9]+)|([0-9]*))$" [formControl]="heightFormControl">
+        <mat-error *ngIf="heightFormControl.hasError('pattern')">
+          This is not valid number!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
       <mat-form-field>
-        <input matInput #weight placeholder="Weight" >
+        <input matInput #weight placeholder="Weight" pattern="^(([0-9]+\.[0-9]*)|([0-9]*\.[0-9]+)|([0-9]*))$" [formControl]="weightFormControl">
+        <mat-error *ngIf="weightFormControl.hasError('pattern')">
+          This is not valid number!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
@@ -27,6 +39,7 @@
   </div>
 
   <button mat-raised-button color="primary" routerLink="/pa165/monsters">Back</button>
-  <button mat-raised-button color="primary" (click)="createMonster(name.value, height.value, weight.value, agility)">Create monster</button>
+  <button mat-raised-button color="primary" [disabled]="!nameFormControl.valid || !heightFormControl.valid || !weightFormControl.valid"
+          (click)="createMonster(name.value, height.value, weight.value, agility)">Create monster</button>
 
 </mat-card>
diff --git a/creatures-hunting-angular/src/app/manager/monster-create/monster-create.component.ts b/creatures-hunting-angular/src/app/manager/monster-create/monster-create.component.ts
@@ -6,6 +6,7 @@ import {ApplicationConfig, CONFIG_TOKEN} from "../../app-config";
 import {AddMonstersComponent} from "../../add-monsters-dialog/add-monsters-dialog.component";
 import {MatDialog} from "@angular/material";
 import {ErrorDialogComponent} from "../../error-dialog/error-dialog.component";
+import {FormControl, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-monster-create',
@@ -15,6 +16,9 @@ import {ErrorDialogComponent} from "../../error-dialog/error-dialog.component";
 export class MonsterCreateComponent implements OnInit {
 
   cookie: boolean = false;
+  nameFormControl: FormControl;
+  heightFormControl: FormControl;
+  weightFormControl: FormControl;
 
   agility: string;
 
@@ -36,6 +40,12 @@ export class MonsterCreateComponent implements OnInit {
       return;
     }
     this.checkIfCookieExist();
+
+    this.nameFormControl = new FormControl('', [
+      Validators.required,
+    ]);
+    this.heightFormControl = new FormControl('', []);
+    this.weightFormControl = new FormControl('', []);
   }
 
   checkIfCookieExist(){

diff --git a/creatures-hunting-angular/src/app/manager/monster-detail/monster-detail.component.html b/creatures-hunting-angular/src/app/manager/monster-detail/monster-detail.component.html
@@ -5,17 +5,32 @@
   <div>
     <div>
       <mat-form-field>
-        <input matInput #name placeholder="Name" value="{{monster.name}}" disabled="{{!isAdmin}}">
+        <input matInput #name placeholder="Name" value="{{monster.name}}" disabled="{{!isAdmin}}"
+               pattern="^[a-zA-Z]+$" [formControl]="nameFormControl">
+        <mat-error *ngIf="nameFormControl.hasError('pattern') && !nameFormControl.hasError('required') && nameFormControl.dirty">
+          This is not valid name!
+        </mat-error>
+        <mat-error *ngIf="nameFormControl.hasError('required') && nameFormControl.dirty">
+          Name is required!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
       <mat-form-field>
-        <input matInput #height placeholder="Height" value="{{monster.height}}" disabled="{{!isAdmin}}">
+        <input matInput #height placeholder="Height" value="{{monster.height}}" disabled="{{!isAdmin}}"
+               pattern="^(([0-9]+\.[0-9]*)|([0-9]*\.[0-9]+)|([0-9]*))$" [formControl]="heightFormControl">
+        <mat-error *ngIf="heightFormControl.hasError('pattern')">
+          This is not valid number!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
       <mat-form-field>
-        <input matInput #weight placeholder="Weight" value="{{monster.weight}}" disabled="{{!isAdmin}}">
+        <input matInput #weight placeholder="Weight" value="{{monster.weight}}" disabled="{{!isAdmin}}"
+               pattern="^(([0-9]+\.[0-9]*)|([0-9]*\.[0-9]+)|([0-9]*))$" [formControl]="weightFormControl">
+        <mat-error *ngIf="weightFormControl.hasError('pattern')">
+          This is not valid number!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
@@ -28,5 +43,6 @@
       </mat-form-field>
     </div>
   </div>
-  <button mat-raised-button color="primary" (click)="updateMonster(name.value, height.value, weight.value, selectedAgility)" *ngIf="isAdmin">Update</button>
+  <button mat-raised-button color="primary" [disabled]="!heightFormControl.valid || !weightFormControl.valid || (!nameFormControl.valid && nameFormControl.dirty)"
+          (click)="updateMonster(name.value, height.value, weight.value, selectedAgility)" *ngIf="isAdmin">Update</button>
 </mat-card>
diff --git a/creatures-hunting-angular/src/app/manager/monster-detail/monster-detail.component.ts b/creatures-hunting-angular/src/app/manager/monster-detail/monster-detail.component.ts
@@ -6,6 +6,7 @@ import {CookieService} from "ngx-cookie-service";
 import {ApplicationConfig, CONFIG_TOKEN} from "../../app-config";
 import {ErrorDialogComponent} from "../../error-dialog/error-dialog.component";
 import {MatDialog} from "@angular/material";
+import {FormControl, Validators} from "@angular/forms";
 
 
 @Component({
@@ -21,6 +22,9 @@ export class MonsterDetailComponent implements OnInit {
   selectedAgility: string;
   cookie: boolean = false;
   isAdmin: boolean = false;
+  nameFormControl: FormControl;
+  heightFormControl: FormControl;
+  weightFormControl: FormControl;
 
   constructor(private http: HttpClient,
               private route: ActivatedRoute,
@@ -43,6 +47,11 @@ export class MonsterDetailComponent implements OnInit {
     }
     this.checkIsAdminCookie();
     this.loadData();
+    this.nameFormControl = new FormControl('', [
+      Validators.required
+    ]);
+    this.heightFormControl = new FormControl();
+    this.weightFormControl = new FormControl();
   }
 
   checkIsAdminCookie(){

diff --git a/creatures-hunting-angular/src/app/manager/user-create/user-create.component.html b/creatures-hunting-angular/src/app/manager/user-create/user-create.component.html
@@ -68,7 +68,8 @@
         </mat-error>
       </div>
       <button mat-raised-button color="primary" matStepperPrevious class="previousButtons">Back</button>
-      <button mat-raised-button color="primary" (click)="createUser(firstName.value, lastName.value, email.value, password.value)">Create</button>
+      <button mat-raised-button color="primary" [disabled]="!fourthFormGroup.valid"
+              (click)="createUser(firstName.value, lastName.value, email.value, password.value)">Create</button>
     </form>
   </mat-step>
 </mat-horizontal-stepper>
diff --git a/creatures-hunting-angular/src/app/manager/weapon-create/weapon-create.component.html b/creatures-hunting-angular/src/app/manager/weapon-create/weapon-create.component.html
@@ -1,7 +1,13 @@
 <mat-card class="main-card mat-elevation-z4" >
   <div>
     <mat-form-field>
-      <input matInput #name  placeholder="Name" >
+      <input matInput #name  placeholder="Name" required pattern="^[a-zA-Z]+$" [formControl]="nameFormControl">
+      <mat-error *ngIf="nameFormControl.hasError('pattern') && !nameFormControl.hasError('required')">
+        This is not valid name!
+      </mat-error>
+      <mat-error *ngIf="nameFormControl.hasError('required')">
+        Name is required!
+      </mat-error>
     </mat-form-field>
   </div>
   <div>
@@ -18,17 +24,24 @@
 
   <div>
     <mat-form-field>
-      <input matInput #range placeholder="Range" >
+      <input matInput #range placeholder="Range" pattern="^[0-9]*$" [formControl]="rangeFormControl">
+      <mat-error *ngIf="rangeFormControl.hasError('pattern')">
+        This is not valid number!
+      </mat-error>
     </mat-form-field>
   </div>
   <div>
     <mat-form-field>
-      <input matInput #magazineCapacity placeholder="Magazine Capacity" >
+      <input matInput #magazineCapacity placeholder="Magazine Capacity" pattern="^[0-9]*$" [formControl]="magazineFormControl">
+      <mat-error *ngIf="magazineFormControl.hasError('pattern')">
+        This is not valid number!
+      </mat-error>
     </mat-form-field>
   </div>
 
   <button mat-raised-button color="primary" routerLink="/pa165/weapons">Back</button>
-  <button mat-raised-button color="primary" (click)="createWeapon(name.value, type, range.value,magazineCapacity.value)">Create</button>
+  <button mat-raised-button color="primary" [disabled]="!nameFormControl.valid || !rangeFormControl.valid || !magazineFormControl.valid"
+          (click)="createWeapon(name.value, type, range.value,magazineCapacity.value)">Create</button>
 
 
 </mat-card>
diff --git a/creatures-hunting-angular/src/app/manager/weapon-create/weapon-create.component.ts b/creatures-hunting-angular/src/app/manager/weapon-create/weapon-create.component.ts
@@ -7,6 +7,7 @@ import {CookieService} from "ngx-cookie-service";
 import {ApplicationConfig, CONFIG_TOKEN} from "../../app-config";
 import {ErrorDialogComponent} from "../../error-dialog/error-dialog.component";
 import {MatDialog} from "@angular/material";
+import {FormControl, Validators} from "@angular/forms";
 @Component({
   selector: 'app-weapon-create',
   templateUrl: './weapon-create.component.html',
@@ -15,7 +16,9 @@ import {MatDialog} from "@angular/material";
 export class WeaponCreateComponent implements OnInit {
 
   cookie: boolean = false;
-
+  nameFormControl: FormControl;
+  rangeFormControl: FormControl;
+  magazineFormControl: FormControl;
   type: string;
 
   constructor(private http: HttpClient,
@@ -34,6 +37,11 @@ export class WeaponCreateComponent implements OnInit {
       });
       return;
     }
+    this.nameFormControl = new FormControl('', [
+      Validators.required,
+    ]);
+    this.rangeFormControl = new FormControl('', []);
+    this.magazineFormControl = new FormControl('', []);
   }
 
   checkIfCookieExist(){

diff --git a/creatures-hunting-angular/src/app/manager/weapon-detail/weapon-detail.component.html b/creatures-hunting-angular/src/app/manager/weapon-detail/weapon-detail.component.html
@@ -6,7 +6,13 @@
   <div>
     <div>
       <mat-form-field>
-        <input matInput #name  placeholder="Name" value="{{weapon.name}}" disabled="{{!isAdmin}}" class="attribute">
+        <input matInput #name  placeholder="Name" value="{{weapon.name}}" disabled="{{!isAdmin}}" class="attribute" pattern="^[a-zA-Z]+$" [formControl]="nameFormControl">
+        <mat-error *ngIf="nameFormControl.hasError('pattern') && !nameFormControl.hasError('required')">
+          This is not valid name!
+        </mat-error>
+        <mat-error *ngIf="nameFormControl.hasError('required') && nameFormControl.dirty">
+          Name is required!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
@@ -23,16 +29,25 @@
 
     <div>
       <mat-form-field>
-        <input matInput #range placeholder="Range" value="{{weapon.range}}" disabled="{{!isAdmin}}">
+        <input matInput #range placeholder="Range" value="{{weapon.range}}" disabled="{{!isAdmin}}"
+               pattern="^[0-9]*$" [formControl]="rangeFormControl">
+        <mat-error *ngIf="rangeFormControl.hasError('pattern')">
+          This is not valid number!
+        </mat-error>
       </mat-form-field>
     </div>
     <div>
       <mat-form-field>
-        <input matInput #magazineCapacity placeholder="Magazine Capacity" value="{{weapon.magazineCapacity}}" disabled="{{!isAdmin}}">
+        <input matInput #magazineCapacity placeholder="Magazine Capacity" value="{{weapon.magazineCapacity}}" disabled="{{!isAdmin}}"
+               pattern="^[0-9]*$" [formControl]="magazineFormControl">
+        <mat-error *ngIf="magazineFormControl.hasError('pattern')">
+          This is not valid number!
+        </mat-error>
       </mat-form-field>
     </div>
 
-    <button *ngIf="isAdmin" mat-raised-button color="primary" (click)="updateWeapon(name.value, weaponType, range.value, magazineCapacity.value)">Update</button>
+    <button *ngIf="isAdmin" mat-raised-button color="primary" [disabled]="!magazineFormControl.valid || !rangeFormControl.valid || (!nameFormControl.valid && nameFormControl.dirty)"
+            (click)="updateWeapon(name.value, weaponType, range.value, magazineCapacity.value)">Update</button>
     <button mat-raised-button color="primary" (click)="showMonsters()">Add appropriate monster</button>