Delay on Form setvalidity in AngularJS

Question

I am using a directive on setting a form validity. Everything works accordingly however the boolean value of the custom validity does not return right away and to be exact it needs to do an extra keypress. By the way I'm using 'element.blur' for setting the custom validity.

Here is the HTML code:

<!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>

Here is the JS code:

// 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.

The app is a dynamic field via ng-repeat. I am using data-ng-form for the dynamic validations as well. Both input fields are run by the jquery ui autocomplete. The validation should detect if the value on the field is in the autocomplete choices which is inside an array(the one with the "Items" scope variable). It should throw an error if the one on the input field is not in the choices.

Here is an example in plunkr: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview

Community · Accepted Answer · 2020-06-20 09:12:55Z

If you want to avoid adding keypress event you should use $validators object property on ngModelController. That is correct way to create validator directive anyway. You might also want to add change event to your autocomplete, so that you can $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

BTW. don't create global variables on fly, adding _ at beging of name does not make them local or private.

Collectives™ on Stack Overflow

Delay on Form setvalidity in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related