From 4f85f8e50c2d5240ef4cc53934b586665066e97e Mon Sep 17 00:00:00 2001
From: Ilya Surmay <ilya.surmay@valor-software.com>
Date: Thu, 6 Jul 2017 17:09:45 +0300
Subject: [PATCH] fix(timepicker): fix custom validation demo

---
 .../demos/custom-validation/custom-validation.html  |  9 +++++++--
 .../demos/custom-validation/custom-validation.ts    | 13 +++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.html b/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.html
index 31d8e317ea..282e2be738 100644
--- a/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.html
+++ b/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.html
@@ -1,7 +1,12 @@
 <p>Illustrates custom validation, you have to select time between 11:00 and 12:59</p>
 
-<div class="form-group" [class.has-success]="ctrl.valid" [class.has-danger]="!ctrl.valid">
+<div class="form-group">
   <timepicker [(ngModel)]="myTime" [formControl]="ctrl" required></timepicker>
 </div>
 
-<pre class="alert alert-info">Time is: {{myTime}}</pre>
+<pre class="alert"
+     [class.alert-danger]="!ctrl.valid && !ctrl.pristine"
+     [class.alert-success]="ctrl.valid && !ctrl.pristine">
+  Time is: {{myTime}}
+</pre>
+<div class="alert alert-danger" *ngIf="ctrl.errors && ctrl.errors['outOfRange']">Invalid time</div>
diff --git a/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.ts b/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.ts
index f52065a0d3..d6cfe9df43 100644
--- a/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.ts
+++ b/demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.ts
@@ -10,7 +10,16 @@ export class DemoTimepickerCustomValidationComponent {
 
   public ctrl = new FormControl('', (control: FormControl) => {
     const value = control.value;
-    console.log('control', control);
-    return control;
+    if (!value) {
+      return null;
+    }
+    if (value) {
+      const hours = value.getHours();
+      if (hours < 11 || hours > 12) {
+        return {outOfRange: true};
+      }
+    }
+
+    return null;
   });
 }