angularjs兩個相關輸入的自定義驗證器

Question

我是AngularJs的新手，這是我第一次創建自定義驗證器。我有一個表格，其中包括兩個數字輸入，一個表示幾小時，一個表示分鐘。我需要驗證，如果其中一個輸入是0（小時輸入），分鐘輸入不是0.但是，當它們中的任何一個改變值時都必須發生。這是我到目前爲止所提出的，但並不正確。

HTML 

<form class="form-horizontal" role="form" novalidate name="newActivityForm"> 
    <div class="form-group"> 
    <label class="col-sm-3 control-label">Duration (hours : minutes)</label> 
    <div class="col-sm-3"> 
     <input type="number" min="0" max="24" class="form-control" maxlength="2" id="durationHours" name="durationHours" ng-model="activity.durationHours" minutes-required-when-duration-hours-is-zero required /> 
    </div> 
    <div class="col-sm-1"> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.required && !newActivityForm.durationHours.$error.number" tooltip-placement="top" tooltip="Duration hours field is required">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.number" tooltip-placement="top" tooltip="Duration hours field must be a number">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.max" tooltip-placement="top" tooltip="Duration hours field must be less than or equal to 24">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.min" tooltip-placement="top" tooltip="Duration hours field must be greater than or equal to 0">*</span> 
     <span class="error" data-ng-show="newActivityForm.$error.zeroHoursMinutesGreaterThanZeroVld" tooltip-placement="top" tooltip="If hours equal 0, minutes must be greater than 0">*</span> 
    </div> 
    <div class="col-sm-3"> 
     <input type="number" min="0" max="59" class="form-control" maxlength="2" id="durationMinutes" name="durationMinutes" ng-model="activity.durationMinutes" minutes-required-when-duration-hours-is-zero required /> 
    </div> 
    <div class="col-sm-1"> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.required && !newActivityForm.durationMinutes.$error.number" tooltip-placement="top" tooltip="Duration minutes field is required">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.number" tooltip-placement="top" tooltip="Duration minutes field must be a number">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.max" tooltip-placement="top" tooltip="Duration minutes field must be less than or equal to 59">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.min" tooltip-placement="top" tooltip="Duration minutes field must be greater than or equal to 0">*</span> 
     <span class="error" data-ng-show="newActivityForm.$error.zeroHoursMinutesGreaterThanZeroVld" tooltip-placement="top" tooltip="If hours equal 0, minutes must be greater than 0">*</span> 
    </div> 
    </div> 
</form> 

和minutes-required-when-duration-hours-is-zero DIRECTIVE

app.directive('minutesRequiredWhenDurationHoursIsZero', function() { 
     return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      function validate(value) { 
      if (scope.activity !== undefined && scope.activity.durationHours === 0 && scope.activity.durationMinutes === 0) { 
       ngModel.$setValidity('zeroHoursMinutesGreaterThanZeroVld', false); 
      } else { 
       ngModel.$setValidity('zeroHoursMinutesGreaterThanZeroVld', true); 
      } 
      } 

      scope.$watch(function() { 
      return ngModel.$viewValue; 
      }, validate); 
     } 
     }; 
    }); 

所以這個形式充滿了8分鐘0小時開放如果我寫0到小時，既驗證星出現（用於小時和分鐘）。如果我記下會議記錄並寫上一個號碼，星星不會消失。我發現這是因爲ngModel的時間是無效的，但是當我改變分鐘的時候，我怎樣才能設置小時的ngModel再次有效？

Answer 1

我已經爲它找到一個解決方案：

<div class="form-group" minutes-required-when-duration-hours-is-zero ng-model="activity" hours="durationHours" minutes="durationMinutes"> 
     <label class="col-sm-3 control-label">Duration (hours : minutes)</label> 
     <div class="col-sm-3"> 
     <input type="number" min="0" max="24" class="form-control" maxlength="2" id="durationHours" name="durationHours" placeholder="hours" ng-model="activity.durationHours" required /> 
     </div> 
     <div class="col-sm-1"> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.required && !newActivityForm.durationHours.$error.number" tooltip-placement="top" tooltip="Duration hours field is required">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.number" tooltip-placement="top" tooltip="Duration hours field must be a number">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.max" tooltip-placement="top" tooltip="Duration hours field must be less than or equal to 24">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationHours.$error.min" tooltip-placement="top" tooltip="Duration hours field must be greater than or equal to 0">*</span> 
     </div> 
     <div class="col-sm-3"> 
     <input type="number" min="0" max="59" class="form-control" maxlength="2" id="durationMinutes" name="durationMinutes" placeholder="minutes" ng-model="activity.durationMinutes" required /> 
     </div> 
     <div class="col-sm-1"> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.required && !newActivityForm.durationMinutes.$error.number" tooltip-placement="top" tooltip="Duration minutes field is required">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.number" tooltip-placement="top" tooltip="Duration minutes field must be a number">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.max" tooltip-placement="top" tooltip="Duration minutes field must be less than or equal to 59">*</span> 
     <span class="error" data-ng-show="newActivityForm.durationMinutes.$error.min" tooltip-placement="top" tooltip="Duration minutes field must be greater than or equal to 0">*</span> 
     <span class="error" data-ng-show="newActivityForm.$error.zeroHoursMinutesGreaterThanZeroVld" tooltip-placement="top" tooltip="If hours equal 0, minutes must be greater than 0">*</span 
     </div> 
</div> 

和JS：

app.directive('minutesRequiredWhenDurationHoursIsZero', function() { 
     return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 

      function validate() { 

      var activity = ngModel.$modelValue; 

      if (!activity) { 
       return; 
      } 

      var durationHours = activity[attrs['hours']]; 
      var durationMinutes = activity[attrs['minutes']]; 

      if (durationHours === 0 && durationMinutes === 0) { 
       ngModel.$setValidity('zeroHoursMinutesGreaterThanZeroVld', false); 
      } else { 
       ngModel.$setValidity('zeroHoursMinutesGreaterThanZeroVld', true); 
      } 
      } 

      scope.$watch(function(newValue, oldValue) { 
      validate(); 
      }); 
     } 
     }; 
    });