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

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

1 个答案: