Question

所以我有一个像这样的指令，它很有效，但我希望如果用户将IP地址更改为“192.168.3.10”或将网关更改为“192.168.3.1”，则所有三个字段都标记为无效

基本上如果一个字段标记为无效，则另外两个字段。

var myApp = angular.module('myApp', []);

myApp.controller("MyCtrl", ["$scope",function($scope) {
$scope.IPAddress = "192.168.1.10";
$scope.Gateway = "192.168.1.1";
$scope.Netmask = "255.255.255.0";
}]);
myApp.directive("networkCheck", function() {
  return {
    require: 'ngModel',
    scope: {
      otherIp: "=",
      netmask: "="
    },
    link: function(scope, elem, attrs, ctrl) {
      var sameNetwork = function(ipOne, ipTwo, netmask) {
      console.log(ipOne, ipTwo, netmask);
      if (!ipOne || !ipTwo || !netmask) {
        return true;
      }
      var components1 = ipOne.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/);
      var components2 = ipTwo.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/);
      var subcomps = netmask.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/);

      if (components1 === null || components2 === null || subcomps === null) {
        return;
      }

      var ip1 = parseInt(components1[1]);
      var ip2 = parseInt(components1[2]);
      var ip3 = parseInt(components1[3]);
      var ip4 = parseInt(components1[4]);

      var sp1 = parseInt(components2[1]);
      var sp2 = parseInt(components2[2]);
      var sp3 = parseInt(components2[3]);
      var sp4 = parseInt(components2[4]);

      var sn1 = parseInt(subcomps[1]);
      var sn2 = parseInt(subcomps[2]);
      var sn3 = parseInt(subcomps[3]);
      var sn4 = parseInt(subcomps[4]);

      var octa1 = ip1 & sn1;
      var octa2 = ip2 & sn2;
      var octa3 = ip3 & sn3;
      var octa4 = ip4 & sn4;
      var octb1 = sp1 & sn1;
      var octb2 = sp2 & sn2;
      var octb3 = sp3 & sn3;
      var octb4 = sp4 & sn4;

      if ((octa1 == octb1) && (octa2 == octb2) && (octa3 == octb3) && (octa4 == octb4)) {
        return true;
      } else {
        return false;
      }
    };

    ctrl.$validators.networkCheck = function(modelValue) {
      return sameNetwork(modelValue, scope.otherIp, scope.netmask);
    };

    scope.$watch("ipCheck", function() {
      ctrl.$validate();
    });
  }
}
});

http://jsfiddle.net/t55fLhry/1/

Answer 1

您可以做的一件事是将表单传递给您的指令，然后设置$watch并通过模型的控制器检查每个模型的有效性。这将允许您随时更改所有输入的有效性：

请参阅此更新的jsfiddle：http://jsfiddle.net/q2fLz54t/

<强>标记

<input type="text" name="ipaddress" network-check ng-model="IPAddress" form="IPForm"/>

<强>指令

...
scope.$watch("ngModel", function(newValue, oldValue) {
  if (newValue !== oldValue) {
    sameNetwork(scope.form.gateway, scope.form.ipaddress, scope.form.netmask);
  }
});
...
var sameNetwork = function(ipOne, ipTwo, netmask) {
  ...    
  // set validity in your checking function 
  ipOne.$setValidity('network-check', true);
  ipTwo.$setValidity('network-check', true); 
  netmask.$setValidity('network-check', true);
  ...
}

角度输入验证其他输入？

1 个答案: