AngularJS form validation triggered by other fields

Question

I have an angularjs application and have to do form validation with custom business rules. The problem is that my validation rules for a particular input field is dependent on other fields, and I don't know how to trigger the validation other than when the actual modelvalue changes.

The case is a dynamic list of employees each with a dynamic list of times of day to be entered. One rule is that these times must not overlap, which means one value can be invalid due to another value being changed and vice-versa. I also have to show an error message for each field.

The form content is generated from the datamodel with a few layers of nested repeaters. I have made a custom directive that contains the different validation rules and it triggers nicely when that field changes. I'm using ngMessages to show the appropriate errormessage based on what business rule is violated.

The question is, how do I trigger validation on all other fields, when one particular field is changed? Preferably I should just trigger validation of all fields for the employee, whos value is being changed, since the values for one employee doesn't affect validation of other employees.

The fiddle here has a simplified version of my case, where the "overlap" rule just checks if two numbers are the same.

The html:

<form name="demoForm">
    <div ng-repeat="employee in list">
    <div ng-bind="employee.name"></div>
    <div ng-repeat="day in employee.days" ng-form="employeeForm">

      <input ng-model="day.hours" name="hours" custom-validate="{day: day, days: employee.days}" ng-model-options="{allowInvalid:true}" />
      <span ng-messages="employeeForm.hours.$error">
        <span ng-message="number">Should be a number.</span>
      <span ng-message="businessHours">The number is outside business hours.</span>
      <span ng-message="max">The number is too large.</span>
      <span ng-message="overlap">The number must be unique for each employee.</span>
      </span>
    </div>
    <br/>
  </div>
</form>

The validation directive:

angular.module('app').directive('customValidate', [validator]);

function validator() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      data: '=customValidate'
    },
    link: linkFunc,
  };

  function linkFunc(scope, element, attrs, ctrl) {
    ctrl.$validators.number = function(value) {
      return value === "" || Number.isInteger(+value);
    }

    ctrl.$validators.businessHours = function(value) {
      // imagine other validation data here
      return value === "" || (value >= 1 && value <= 10);
    }

    ctrl.$validators.overlap = function(value) {
      if (value === "") {
        return true;
      }

      // find all other entries with identical value excluding self
      var identical = scope.data.days.filter(function(x) {
        return x !== scope.data.day && +x.hours === +value;
      });

      return identical.length === 0;
    };
  }
}

Fiddle here: http://jsfiddle.net/maxrawhawk/dvpjdjbv/

Answer 1

The answer: This little piece of code in the end of the directives link function:

scope.$watch('data', function(){
        ctrl.$validate();
    }, true);

Watch the data related to validation given from the markup with the most important detail 'true' as third parameter, making $watch check for object equality. Updated fiddle: http://jsfiddle.net/maxrawhawk/dvpjdjbv/12/