两个相关输入的angularjs自定义验证器

我是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>

---

因此，此表单以小时和分钟开头，小时用8填充，分钟用0填充。如果我将0写入小时，则两个验证星号都会出现（小时和分钟）。如果我在分钟前写下一个数字，星星不会消失。我发现这是因为小时的ngModel无效，但当我更改分钟数时，如何将小时的ngModel重新设置为有效？

我找到了解决方案：

<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>

---

将此添加到分钟输入

ng required=“activity.durationHours！=0”

，您不需要自定义指令this@HarishR这只会使分钟输入需要一个值，这意味着用户也可以使用0。所以如果我这样做，如果小时是0，则需要分钟。活动不能为0小时0分钟。必须至少为0小时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>

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();
          });
        }
      };
    });