From aa995e845a24ab441e84bd84c8ac2a4bfb889fe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Danyi?= <david.danyi@ericsson.com>
Date: Thu, 6 Sep 2018 17:08:33 +0200
Subject: [PATCH] * basic validation and error display added to slide editor
 and team editor

---
 src/app/admin/slide-editor/slide-editor.component.html |  5 +++--
 src/app/admin/slide-editor/slide-editor.component.ts   |  5 +++++
 src/app/admin/team-editor/team-editor.component.html   | 10 ++++++----
 src/app/admin/team-editor/team-editor.component.ts     |  5 +++++
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app/admin/slide-editor/slide-editor.component.html b/src/app/admin/slide-editor/slide-editor.component.html
index f6782d8..7b68938 100755
--- a/src/app/admin/slide-editor/slide-editor.component.html
+++ b/src/app/admin/slide-editor/slide-editor.component.html
@@ -46,9 +46,10 @@
           <label for="slide_data">Slide data</label>
           <textarea id="slide_data" rows="30" name="slide_data" [(ngModel)]="slide.slideData"></textarea>
         </div>
-        <div class="field" *ngIf="isIframe">
+        <div class="field" *ngIf="isIframe" [class.error]="checkError(slideUrl)">
           <label for="slide_url">Slide url</label>
-          <input id="slide_url" type="text" name="slide_data" [(ngModel)]="slide.slideUrl">
+          <input id="slide_url" type="url" name="slide_url"
+                 [(ngModel)]="slide.slideUrl" #slideUrl="ngModel">
         </div>
 
         <div class="five wide field">
diff --git a/src/app/admin/slide-editor/slide-editor.component.ts b/src/app/admin/slide-editor/slide-editor.component.ts
index 191a08c..5022eca 100755
--- a/src/app/admin/slide-editor/slide-editor.component.ts
+++ b/src/app/admin/slide-editor/slide-editor.component.ts
@@ -6,6 +6,7 @@ import * as marked from 'marked';
 import {Slide, SlideType, SlideVisibility} from '../../shared/slide';
 import {SlideService} from '../../shared/service/slide.service';
 import {Team} from '../../shared/team';
+import {NgModel} from '@angular/forms';
 
 @Component({
   selector: 'app-slide-editor',
@@ -76,4 +77,8 @@ export class SlideEditorComponent implements OnInit {
   get isIframe(): boolean {
     return this.slide.type === SlideType.IFrame;
   }
+
+  public checkError(fieldModel: NgModel): boolean {
+    return fieldModel.invalid && (fieldModel.dirty || fieldModel.touched);
+  }
 }
diff --git a/src/app/admin/team-editor/team-editor.component.html b/src/app/admin/team-editor/team-editor.component.html
index 2631e7a..e32b7c6 100755
--- a/src/app/admin/team-editor/team-editor.component.html
+++ b/src/app/admin/team-editor/team-editor.component.html
@@ -2,13 +2,15 @@
     <h1 class="ui dividing header">Team editor</h1>
     <form class="ui form" #teamEditorForm (ngSubmit)="saveTeam()">
         <div class="two fields">
-            <div class="six wide field">
+            <div class="six wide field" [class.error]="checkError(teamName)">
                 <label for="team_name">Team name</label>
-                <input id="team_name" type="text" name="team_name" [(ngModel)]="team.name">
+                <input id="team_name" type="text" name="team_name"
+                       required [(ngModel)]="team.name" #teamName="ngModel">
             </div>
-            <div class="six wide field">
+            <div class="six wide field" [class.error]="checkError(filterId)">
                 <label for="filter_id">Jira filter id</label>
-                <input id="filter_id" type="number" name="filter_id" [(ngModel)]="team.filterId">
+                <input id="filter_id" type="number" name="filter_id"
+                       required minlength="4" min="1" [(ngModel)]="team.filterId" #filterId="ngModel">
             </div>
         </div>
         <div class="six wide field">
diff --git a/src/app/admin/team-editor/team-editor.component.ts b/src/app/admin/team-editor/team-editor.component.ts
index 36cd34d..5c80ea6 100755
--- a/src/app/admin/team-editor/team-editor.component.ts
+++ b/src/app/admin/team-editor/team-editor.component.ts
@@ -6,6 +6,7 @@ import { TeamService } from '../../shared/service/team.service';
 import { Team } from '../../shared/team';
 import { Member } from '../../shared/member';
 import { Label } from '../../shared/label';
+import {NgModel} from '@angular/forms';
 
 @Component({
   selector: 'app-team-editor',
@@ -129,4 +130,8 @@ export class TeamEditorComponent implements OnInit {
       );
     }
   }
+
+  public checkError(fieldModel: NgModel): boolean {
+    return fieldModel.invalid && (fieldModel.dirty || fieldModel.touched);
+  }
 }