fix(timepicker): leave view alone if either input is invalid

- Change to not auto-update inputs if either input is invalid

Closes #4160
Fixes #3825

Author: wesleycho

src/timepicker/test/timepicker.spec.js

@@ -886,6 +886,38 @@ describe('timepicker directive', function () {
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
 
+    it('leaves view alone when hours are invalid and minutes are updated', function() {
+      var hoursEl = getHoursInputEl(),
+        minutesEl = getMinutesInputEl();
+
+      changeInputValueTo(hoursEl, '25');
+      hoursEl.blur();
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['25', '40', 'PM']);
+
+      changeInputValueTo(minutesEl, '2');
+      minutesEl.blur();
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['25', '2', 'PM']);
+    });
+
+    it('leaves view alone when minutes are invalid and hours are updated', function() {
+      var hoursEl = getHoursInputEl(),
+        minutesEl = getMinutesInputEl();
+
+      changeInputValueTo(minutesEl, '61');
+      minutesEl.blur();
+      $rootScope.$digest();
+      expect($rootScope.time).toBe(null);
+      expect(getTimeState()).toEqual(['02', '61', 'PM']);
+
+      changeInputValueTo(hoursEl, '2');
+      hoursEl.blur();
+      $rootScope.$digest();
+      expect($rootScope.time).toBe(null);
+      expect(getTimeState()).toEqual(['2', '61', 'PM']);
+    });
+
     it('handles 12/24H mode change', function() {
       $rootScope.meridian = true;
       element = $compile('<timepicker ng-model="time" show-meridian="meridian"></timepicker>')($rootScope);
@@ -1661,4 +1693,3 @@ describe('timepicker directive', function () {
     });
   });
 });
-

src/timepicker/timepicker.js

@@ -217,9 +217,10 @@ angular.module('ui.bootstrap.timepicker', [])
     };
 
     $scope.updateHours = function() {
-      var hours = getHoursFromTemplate();
+      var hours = getHoursFromTemplate(),
+        minutes = getMinutesFromTemplate();
 
-      if ( angular.isDefined(hours) ) {
+      if (angular.isDefined(hours) && angular.isDefined(minutes)) {
         selected.setHours( hours );
         if (selected < min || selected > max) {
           invalidate(true);
@@ -240,9 +241,10 @@ angular.module('ui.bootstrap.timepicker', [])
     });
 
     $scope.updateMinutes = function() {
-      var minutes = getMinutesFromTemplate();
+      var minutes = getMinutesFromTemplate(),
+        hours = getHoursFromTemplate();
 
-      if ( angular.isDefined(minutes) ) {
+      if (angular.isDefined(minutes) && angular.isDefined(hours)) {
         selected.setMinutes( minutes );
         if (selected < min || selected > max) {
           invalidate(undefined, true);
@@ -324,10 +326,10 @@ angular.module('ui.bootstrap.timepicker', [])
     selected = addMinutes( selected, minutes );
     refresh();
   }
-  
+
   $scope.showSpinners = angular.isDefined($attrs.showSpinners) ?
     $scope.$parent.$eval($attrs.showSpinners) : timepickerConfig.showSpinners;
-  
+
   $scope.incrementHours = function() {
     if (!$scope.noIncrementHours()) {
       addMinutesToSelected(hourStep * 60);