Question

我正在使用设置表单有效性的指令。一切都相应地工作，但自定义有效性的布尔值不会立即返回，确切地说，它需要做一个额外的按键。顺便说一下，我使用'element.blur'来设置自定义有效性。

以下是HTML代码：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
      <form ng-controller="myCtrl" name="bioManagementForm" novalidate>
        <fieldset ng-repeat="bioEducation in bioEducations" data-ng-form="nestedbioEducationsForm">
          Degree: <br />
          Availability: -- {{ nestedbioEducationsForm.bio_education_degree.$error.available }}
          <input class="form-control input-form" ng-model="bioEducation.bio_education_degree" name="bio_education_degree" id="bio_education_degree" auto-complete-validation ui-items="searchDegreeItems">
          <span class="errors" id="error-bio-education-degree">
                        <span ng-if="nestedbioEducationsForm.bio_education_degree.$error.available"> * Not Available <br /></span>
                    </span>
                    School: <br />
                    Availability: -- {{ nestedbioEducationsForm.bio_education_school.$error.available }}
                    <input class="form-control input-form" type="text" ng-model="bioEducation.bio_education_school" name="bio_education_school" id="bio_education_school" auto-complete-validation ui-items="searchSchoolItems">
          <span class="errors" id="error-bio-education-school">
                        <span ng-if="nestedbioEducationsForm.bio_education_school.$error.available"> * Not Available <br /></span>
                    </span>
        </fieldset>
    </form>
  </body>
</html>

这是JS代码：

// Code goes here

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


myApp.controller('myCtrl', function($scope){
  $scope.name = "dean";
  $scope.originalBioEducations = [{}];
    $scope.bioEducations = angular.copy($scope.originalBioEducations);
    $scope.searchSchoolItems = ["Don Bosco", "JRU", "UST", "FEU"];
    $scope.searchDegreeItems = ["BSIT", "BSED", "ECE", "COE"];
});

function monkeyPatchAutocomplete() {
    // Don't really need to save the old fn, 
    // but I could chain if I wanted to
    var oldFn = $.ui.autocomplete.prototype._renderItem;

    $.ui.autocomplete.prototype._renderItem = function( ul, item) {
        var re = new RegExp( "(" + this.term + ")", "gi" );
        var t = item.label.replace(re,"<span style='font-weight:bold;color:#04508e;'>" + this.term + "</span>");
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + t + "</a>" )
        .appendTo( ul );
    };
} 
monkeyPatchAutocomplete();
function remove_duplicates_safe(arr) {
        var obj = {};
        var arr2 = [];
        for (var i = 0; i < arr.length; i++) {
            if (!(arr[i] in obj)) {
                arr2.push(arr[i]);
                obj[arr[i]] = true;
            }
        }
        return arr2;
    } 

myApp.directive('autoCompleteValidation', function($timeout){
        return {
            require: 'ngModel',
            scope: {
                uiItems: "="
            },
            link: function(scope, element, attrs, ctrl){
                scope.$watchCollection('uiItems', function(val){
                    items = scope.uiItems.filter(function(n){ return n != undefined });
                    element.autocomplete({
                        source: remove_duplicates_safe(items),
                        minLength:2,
                    });
                    element.bind('blur', function(){
                        _val = element.val();
                        _index = items.indexOf(_val);
                        if(_index == -1){
                            ctrl.$setValidity('available', false);
                            console.log("dean");
                        }else{
                            ctrl.$setValidity('available', true);
                            console.log("armada");
                        }
                    });
                });
            }
        }
    });

P.S。

该应用是通过ng-repeat的动态字段。我也使用data-ng-form进行动态验证。两个输入字段都由jquery ui自动完成运行。验证应该检测字段上的值是否在数组内的自动完成选项中（具有“Items”范围变量的那个）。如果输入字段中的那个不在选项中，则应该抛出错误。

这是plunkr中的一个例子：http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview

Answer 1

如果您想避免添加keypress事件，则应在ngModelController上使用$ validators对象属性。无论如何，这是创建验证器指令的正确方法。您可能还想将更改事件添加到自动完成，以便您可以$ setViewValue。

               scope.$watchCollection('uiItems', function(val){
                items = scope.uiItems.filter(function(n){ return n != undefined });
                element.autocomplete({
                    source: remove_duplicates_safe(items),
                    minLength:2,
                    change: function () {
                      ctrl.$setViewValue(element.val());
                    }
                });
            });

            ctrl.$validators.available = function (modelValue, viewValue) {
              var value = modelValue || viewValue;
              if (items) {
              var _index = items.indexOf(value);

              return _index !== -1;
              }
            }

plunker：http://plnkr.co/edit/pcARNdakhEouqnCIQ2Yt?p=preview

顺便说一句。不要在飞行中创建全局变量，在名称的边缘添加_不会使它们成为本地或私有。

延迟AngularJS中的表单设置有效

1 个答案: