Question

我对AngularJS +自定义验证有一些疑问，我自己阅读和检查过：

AngularJS为简单的字段验证提供了很好的帮助（ng-require，...）。
实现单个字段自定义验证的最佳方法是通过指令（不污染控制器）。

当我们拥有影响多个领域的自定义业务验证时，我的疑虑就出现了。我们来看看以下简单的场景：

simple UI flight status

我们正在编辑航班到达状态，字段：状态（着陆/预定/延迟），评论（有关航班状态的其他信息）。
我想要应用的商业验证是：仅当状态字段值为“已延迟”时才需要注释字段。

我实施它的方式：

Directive + Service

定义指令以处理状态+注释字段更改（通过$ watch状态）。
该指令将业务验证委托给服务

我认为这种方法给我的好处是：
我的业务服务验证已被隔离。
我可以轻松地将单元测试添加到该业务验证中。
我可以重复使用它，它不依赖于UI元素。

我已经在JSFiddle（JSFiddle validation sample）中编译了这个示例。

JS：


function MyCtrl($scope) {    
    $scope.arrival = {
        "id": 1,
        "originAirport": "Malaga (AGP)",
        "flightNumber": "Iberia 132",
        "dueAt": "2013-05-26T12:10:10",
        "status": 2,
        "info": "test"
    }
}


myApp.directive('validateinfofield', ['formArrivalValidation', function (formArrivalValidation) {
    return {
        require: "ngModel",
        link: function(scope, elm, attrs, ctrl) {


            ctrl.$parsers.unshift(function(viewValue){
                // Empty? Let's check status
                //if (!viewValue.length && scope.arrival.status == 3) {
                if(formArrivalValidation.validateInfoField(scope.arrival.status, viewValue)) {
                    ctrl.$setValidity('validInfo', true);
                } else {
                    ctrl.$setValidity('validInfo', false);
                }
            });

            // Let's add a watch to arrival.status if the values change we need to 
            // reevaluate, if comments is empty and status is delayes display error
            scope.$watch('arrival.status', function (newValue, oldValue) {
                if (formArrivalValidation.validateInfoField(newValue, scope.editArrivalForm.txInfo.$viewValue)) {
                    ctrl.$setValidity('validInfo', true);
                } else {
                    ctrl.$setValidity('validInfo', false);
                }
            });

        }
    };
}]);

// Validation Service, limited to our "business language"
myApp.factory('formArrivalValidation',

   function () {
       return {
           validateInfoField: function (status, infoField) {
               var isOk = true;

               if (status == 3) {
                   if (infoField == undefined) {
                       isOk = false;
                   } else {
                       if (!infoField.length)
                           isOk = false;
                   }
               }

               return isOk;
           },

       };
   });

这是一个很好的方法吗？是否有更好，更简单的方法来实现这一目标？

Answer 1

关于此部分 - “我要应用的业务验证是：仅当状态字段值为”已延迟“时才需要注释字段。注释字段设置ng-required =“flight.status =='DELAYED'”

Answer 2

回到这个问题......一个有效的方法可能是编写一个指令，接受第二个值作为参数（例如，注释为空）

AngularJS +自定义验证

2 个答案: