feat(timepicker): add model state support

- Adds support for the timepicker model $touched and $dirty states

Closes #3527
Closes #4835

Author: wesleycho

src/timepicker/test/timepicker.spec.js

@@ -1,5 +1,5 @@
 describe('timepicker directive', function() {
-  var $rootScope, $compile, $templateCache, element;
+  var $rootScope, $compile, $templateCache, element, modelCtrl;
 
   beforeEach(module('ui.bootstrap.timepicker'));
   beforeEach(module('template/timepicker/timepicker.html'));
@@ -11,6 +11,8 @@ describe('timepicker directive', function() {
 
     element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
     $rootScope.$digest();
+
+    modelCtrl = element.controller('ngModel');
   }));
 
   function newTime(hours, minutes, seconds) {
@@ -117,7 +119,11 @@ describe('timepicker directive', function() {
   });
 
   it('should be pristine', function() {
-    expect(element.controller('ngModel').$pristine).toBe(true);
+    expect(modelCtrl.$pristine).toBe(true);
+  });
+
+  it('should be untouched', function() {
+    expect(modelCtrl.$untouched).toBe(true);
   });
 
   it('has `selected` current time when model is initially cleared', function() {
@@ -192,6 +198,51 @@ describe('timepicker directive', function() {
     expect(getModelState()).toEqual([14, 40, 24]);
   });
 
+  it('should be dirty when input changes', function() {
+    var upHours = getHoursButton(true);
+    var upMinutes = getMinutesButton(true);
+    var upSeconds = getSecondsButton(true);
+
+    doClick(upHours);
+    expect(modelCtrl.$dirty).toBe(true);
+
+    modelCtrl.$setPristine();
+
+    doClick(upMinutes);
+    expect(modelCtrl.$dirty).toBe(true);
+
+    modelCtrl.$setPristine();
+
+    doClick(upSeconds);
+    expect(modelCtrl.$dirty).toBe(true);
+  });
+
+  it('should be touched when input blurs', function() {
+    var inputs = element.find('input');
+    var hoursInput = inputs.eq(0),
+      minutesInput = inputs.eq(1),
+      secondsInput = inputs.eq(2);
+
+    hoursInput.val(12);
+    $rootScope.$digest();
+    hoursInput.blur();
+    expect(modelCtrl.$touched).toBe(true);
+
+    modelCtrl.$setUntouched();
+
+    minutesInput.val(20);
+    $rootScope.$digest();
+    hoursInput.blur();
+    expect(modelCtrl.$touched).toBe(true);
+
+    modelCtrl.$setUntouched();
+
+    secondsInput.val(9);
+    $rootScope.$digest();
+    hoursInput.blur();
+    expect(modelCtrl.$touched).toBe(true);
+  });
+
   it('meridian button has correct type', function() {
     var button = getMeridianButton();
     expect(button.attr('type')).toBe('button');

src/timepicker/timepicker.js

@@ -301,6 +301,8 @@ angular.module('ui.bootstrap.timepicker', [])
       var hours = getHoursFromTemplate(),
         minutes = getMinutesFromTemplate();
 
+      ngModelCtrl.$setDirty();
+
       if (angular.isDefined(hours) && angular.isDefined(minutes)) {
         selected.setHours(hours);
         selected.setMinutes(minutes);
@@ -329,6 +331,8 @@ angular.module('ui.bootstrap.timepicker', [])
       var minutes = getMinutesFromTemplate(),
         hours = getHoursFromTemplate();
 
+      ngModelCtrl.$setDirty();
+
       if (angular.isDefined(minutes) && angular.isDefined(hours)) {
         selected.setHours(hours);
         selected.setMinutes(minutes);
@@ -356,6 +360,8 @@ angular.module('ui.bootstrap.timepicker', [])
     $scope.updateSeconds = function() {
       var seconds = getSecondsFromTemplate();
 
+      ngModelCtrl.$setDirty();
+
       if (angular.isDefined(seconds)) {
         selected.setSeconds(seconds);
         refresh('s');
@@ -505,6 +511,10 @@ angular.module('ui.bootstrap.timepicker', [])
       }
     }
   };
+
+  $scope.blur = function() {
+    ngModelCtrl.$setTouched();
+  };
 }])
 
 .directive('uibTimepicker', function() {

template/timepicker/timepicker.html

@@ -10,15 +10,15 @@
     </tr>
     <tr>
       <td class="form-group" ng-class="{'has-error': invalidHours}">
-        <input style="width:50px;" type="text" placeholder="HH" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="disabled">
+        <input style="width:50px;" type="text" placeholder="HH" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="disabled" ng-blur="blur()">
       </td>
       <td>:</td>
       <td class="form-group" ng-class="{'has-error': invalidMinutes}">
-        <input style="width:50px;" type="text" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="disabled">
+        <input style="width:50px;" type="text" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="disabled" ng-blur="blur()">
       </td>
       <td ng-show="showSeconds">:</td>
       <td class="form-group" ng-class="{'has-error': invalidSeconds}" ng-show="showSeconds">
-        <input style="width:50px;" type="text" ng-model="seconds" ng-change="updateSeconds()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="disabled">
+        <input style="width:50px;" type="text" ng-model="seconds" ng-change="updateSeconds()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="disabled" ng-blur="blur()">
       </td>
       <td ng-show="showMeridian"><button type="button" ng-class="{disabled: noToggleMeridian()}" class="btn btn-default text-center" ng-click="toggleMeridian()" ng-disabled="noToggleMeridian()" tabindex="{{::tabindex}}">{{meridian}}</button></td>
     </tr>