其他字段触发的AngularJS表单验证

其他字段触发的AngularJS表单验证,angularjs,forms,validation,ng-messages,Angularjs,Forms,Validation,Ng Messages,我有一个angularjs应用程序,必须使用自定义业务规则进行表单验证。 问题在于,我对特定输入字段的验证规则依赖于其他字段,除了实际模型值发生变化外,我不知道如何触发验证 该案例是一个动态的员工列表,每个员工都有一个要输入的时间动态列表。一个规则是这些时间不能重叠,这意味着一个值可能由于另一个值被更改而无效,反之亦然。 我还必须为每个字段显示一条错误消息 表单内容是从数据模型生成的,带有几层嵌套的转发器。 我制作了一个自定义指令,其中包含不同的验证规则,当该字段更改时,它会很好地触发。 我使用

我有一个angularjs应用程序,必须使用自定义业务规则进行表单验证。 问题在于,我对特定输入字段的验证规则依赖于其他字段,除了实际模型值发生变化外,我不知道如何触发验证

该案例是一个动态的员工列表,每个员工都有一个要输入的时间动态列表。一个规则是这些时间不能重叠,这意味着一个值可能由于另一个值被更改而无效,反之亦然。 我还必须为每个字段显示一条错误消息

表单内容是从数据模型生成的,带有几层嵌套的转发器。 我制作了一个自定义指令,其中包含不同的验证规则,当该字段更改时,它会很好地触发。 我使用ngMessages根据违反的业务规则显示相应的errormessage

问题是,当一个特定字段发生更改时,如何触发对所有其他字段的验证?我最好只触发对员工所有字段的验证,因为一个员工的值不会影响对其他员工的验证,所以该员工的值正在更改

这里的fiddle有一个简化版本,其中“重叠”规则只是检查两个数字是否相同

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>

应该是一个数字。
电话号码在营业时间以外。
这个数字太大了。
每个员工的编号必须是唯一的。

验证指令:

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;
    };
  }
}
angular.module('app')。指令('customValidate',[validator]);
函数验证器(){
返回{
限制:“A”,
要求:'ngModel',
范围:{
数据:'=customValidate'
},
链接:linkFunc,
};
函数linkFunc(范围、元素、属性、ctrl){
ctrl.$validators.number=函数(值){
返回值==“”| | Number.isInteger(+值);
}
ctrl.$validators.businessHours=函数(值){
//想象一下这里的其他验证数据
返回值==“”| |(值>=1&&value答案:
指令链接函数末尾的这段代码:

scope.$watch('data', function(){
        ctrl.$validate();
    }, true);
查看与标记中给出的验证相关的数据,最重要的细节“true”作为第三个参数,并进行$Watch检查以确定对象是否相等。 更新小提琴:

在与scope进行了多次较量之后,我自己找到了解决方案。$watch。