Question

我对Angular很新。我有一个表单，用户需要将端口号分配给9个不同的端口输入字段（上下文：它是服务器环境配置的一种形式）。 验证要求是不能分配两次端口号，因此每个9端口号都必须是唯一的。

为此，我有一个名为＆＃34; srb-unique-port＆＃34;的自定义验证指令，我将其分配给输入字段。

指令：

(function () {
    'use strict';

    angular
        .module('account')
        .directive('srbUniquePort', [srbUniquePort]);

    function srbUniquePort() {
        return {
            restrict: 'A',
            require: 'ngModel',            
            scope: true,     
            link: function (scope, element, attrs, ngModel) {

                ngModel.$validators.srbUniquePort = function (val) {                    
                    if (val == null || val == undefined || val == "" || val==0) return true;
                    var fieldName = attrs.name;
                    var configuration = scope.$eval(attrs.srbUniquePort);                    

                    var portFieldsToCheck = [
                        "myRestServicePort",
                        "myRestServicePortSSL",
                        "alfrescoPortHttp",
                        "alfrescoPortHttps",
                        "alfrescoPortTomcatShutdown",
                        "alfrescoPortAJP",
                        "alfrescoPortMySql",
                        "alfrescoPortJOD",
                        "alfrescoPortVti"
                    ];                    
                    for (var i = 0; i < portFieldsToCheck.length; i++) {
                        if (fieldName!=portFieldsToCheck[i] && configuration[portFieldsToCheck[i]] == val) {
                          return false;
                        }
                    }                    
                    return true;
                }                             

            }
        }
    }
})();

HTML表单（摘录，只显示9个字段中的2个）：

    ...
    <md-input-container>
        <label for="company" translate>COMPANY.CONFIGURATION.DBLIB_WEB_SRVC_PORT</label>
        <input ng-model="vm.configuration.dblibWebSrvcPort" name="dblibWebSrvcPort" srb-unique-port="vm.configuration">
        <div ng-messages="configurationForm.dblibWebSrvcPort.$error">
            <div ng-message when="srbUniquePort">
                <span translate>COMPANY.CONFIGURATION.VALIDATION.PORT_NOT_UNIQUE</span>
            </div>
        </div>
    </md-input-container>
    <md-input-container>
        <label for="company" translate>COMPANY.CONFIGURATION.DBLIB_WEB_SRVC_PORT_SSL</label>
        <input ng-model="vm.configuration.dblibWebSrvcPortSLL" name="dblibWebSrvcPortSLL" srb-unique-port="vm.configuration">
        <div ng-messages="configurationForm.dblibWebSrvcPortSLL.$error">
            <div ng-message when="srbUniquePort">
                <span translate>COMPANY.CONFIGURATION.VALIDATION.PORT_NOT_UNIQUE</span>
            </div>
        </div>
    </md-input-container>
    ...

它基本上适用于我当前输入值的字段。但问题是，当我更改一个输入字段的值时，我还需要重新验证所有其他依赖字段。但是我不确定最好的方法是什么，以免在这里遇到无限循环，因为所有字段都有＆＃34; srb-unique-port＆＃34;分配

我已经查看了StackOverflow并发现了这个非常相似的问题：

Angular directive with scope.$watch to force validation of other fields

使用此plunker示例代码： http://plnkr.co/edit/YnxDDAUCS2K7KyXT1AXP?p=preview

但是提供的示例有所不同：它只涉及密码和密码重复字段，其中只有一个字段分配了验证指令。所以它与我的情况不同。

我尝试在上面的代码中添加它：

scope.$watch(ngModel, function (newValue, oldValue) {
    ngModel.$validate();
});

但是这会导致无限循环（为什么ngModel经常在这里发生变化而没有任何进一步的操作，除了验证应该总是导致相同的？）。

Answer 1

这是我最终解决的问题。看起来有点被黑客攻击，但它确实有效。

(function () {
    'use strict';

    angular
        .module('account')
        .directive('srbUniquePort', [srbUniquePort]);

    function srbUniquePort() {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: true,
            link: function (scope, element, attrs, ngModel) {

                function hasAValue(field) {
                    return !!field;
                }

                ngModel.$validators.srbUniquePort = function (val) {

                    var fieldName = attrs.name;

                    var configuration = scope.$eval(attrs.srbUniquePort);
                    var portFieldsToCheck = [
                        "dblibWebSrvcPort",
                        "dblibWebSrvcPortSLL",
                        "myRestServicePort",
                        "myRestServicePortSSL",
                        "alfrescoPortHttp",
                        "alfrescoPortHttps",
                        "alfrescoPortTomcatShutdown",
                        "alfrescoPortAJP",
                        "alfrescoPortMySql",
                        "alfrescoPortJOD",
                        "alfrescoPortVti"
                    ];
                    configuration[fieldName] = val;

                    if (scope.$parent.configuration == undefined) {
                        scope.$parent.configuration = JSON.parse(JSON.stringify(configuration));
                    }
                    scope.$parent.configuration[fieldName] = val;

                    // compare each port field with each other and in case if equality, 
                    // remember it by putting a "false" into the validityMap helper variable
                    var validityMap = [];
                    for (var i = 0; i < portFieldsToCheck.length; i++) {
                        for (var j = 0; j < portFieldsToCheck.length; j++) {
                            if (portFieldsToCheck[i] != portFieldsToCheck[j]) {

                                var iFieldHasAValue = hasAValue(scope.$parent.configuration[portFieldsToCheck[i]]);
                                var jFieldHasAValue = hasAValue(scope.$parent.configuration[portFieldsToCheck[j]]);
                                var valHasAValue = hasAValue(val);

                                if (iFieldHasAValue && jFieldHasAValue
                                    && scope.$parent.configuration[portFieldsToCheck[i]] == scope.$parent.configuration[portFieldsToCheck[j]]
                                    ) {
                                    validityMap[portFieldsToCheck[i]] = false;
                                    validityMap[portFieldsToCheck[j]] = false;
                                }
                            }
                        }
                    }

                    // in the end, loop through all port fields and set
                    // the validity here manually
                    for (var i = 0; i < portFieldsToCheck.length; i++) {
                        var valid = validityMap[portFieldsToCheck[i]];
                        if (valid == undefined) valid = true;
                        ngModel.$$parentForm[portFieldsToCheck[i]].$setValidity("srbUniquePort", valid);
                    }

                    // ending with the standard validation for the current field
                    for (var i = 0; i < portFieldsToCheck.length; i++) {
                        if (fieldName != portFieldsToCheck[i] && configuration[portFieldsToCheck[i]] == val) {
                            return false;
                        }
                    }
                    return true;
                }

            }
        }
    }
})();

如何重新验证具有多个依赖字段的表单？

1 个答案: