Execute the validation directive using the digest cycle

Question

Execute the validation directive using the digest cycle

This particular directive is designed to determine whether a given value exists within the associated datalist or not. It functions flawlessly when I input text into the field, but it fails to work properly if the datalist undergoes changes as a result of the $digest cycle (such as adding new values). However, if I then make an update to the input, it starts working correctly.

app.directive('list', function (){
    return {
        restrict: "A",
        require: "ngModel",
        priority: 100,
        link: function(scope, elem, attr, ngModel){
            var list;

            //For DOM -> model validation
            ngModel.$validators.list = function(value){
                if(!list){
                    var options = document.getElementById(attr.list).options;
                    var list = [];
                    for(var i=options.length-1; i>=0; i--){
                        if(isString(options[i].getAttribute("valid"))){
                            if(options[i].label){list.push(options[i].label.toLowerCase())}
                            if(options[i].value){list.push(options[i].value.toLowerCase())}
                        }
                    };
                }
                var valid = (value||!value==""?list.indexOf(value.toLowerCase()) !== -1:true);
                return (!list.length)||valid;
            };
        }
    };
});

javascript angularjs angularjs-directive

Answer 1

Answer №1

To activate the validation pipeline, you must monitor the list and then execute ngModel.$validate();...

app.directive('list', function (){
    return {
        restrict: "A",
        require: "ngModel",
        priority: 100,
        link: function(scope, elem, attr, ngModel){
            var list;
           
            scope.$watch(function () {
                return $parse(attrs.list)(scope);
            }, function () {
                ngModel.$validate();
            });

            //For DOM -> model validation
            ngModel.$validators.list = function(value){
                if(!list){
                    var options = document.getElementById(attr.list).options;
                    var list = [];
                    for(var i=options.length-1; i>=0; i--){
                        if(isString(options[i].getAttribute("valid"))){
                            if(options[i].label){list.push(options[i].label.toLowerCase())}
                            if(options[i].value){list.push(options[i].value.toLowerCase())}
                        }
                    };
                }
                var valid = (value||!value==""?list.indexOf(value.toLowerCase()) !== -1:true);
                return (!list.length)||valid;
            };
        }
    };
});

Answer 2

To activate the validation pipeline, you must monitor the list and then execute ngModel.$validate();...

app.directive('list', function (){
    return {
        restrict: "A",
        require: "ngModel",
        priority: 100,
        link: function(scope, elem, attr, ngModel){
            var list;
           
            scope.$watch(function () {
                return $parse(attrs.list)(scope);
            }, function () {
                ngModel.$validate();
            });

            //For DOM -> model validation
            ngModel.$validators.list = function(value){
                if(!list){
                    var options = document.getElementById(attr.list).options;
                    var list = [];
                    for(var i=options.length-1; i>=0; i--){
                        if(isString(options[i].getAttribute("valid"))){
                            if(options[i].label){list.push(options[i].label.toLowerCase())}
                            if(options[i].value){list.push(options[i].value.toLowerCase())}
                        }
                    };
                }
                var valid = (value||!value==""?list.indexOf(value.toLowerCase()) !== -1:true);
                return (!list.length)||valid;
            };
        }
    };
});

Answer 3

Answer №2

It's essential to check out this insightful Stack Overflow discussion on mastering the thought process behind Angular development.

If you find yourself working with a <datalist> element and passing its id through the list attribute in your directive, the following code snippet might resemble what you're dealing with:

<datalist id="myDatalist">
  <options ng-repeat="item in items" value="{{item.value}}">{{item.label}}</options>
</datalist>

<input ng-model="foo" list="myDatalist">

Avoid attempting to extract values directly from the DOM elements like <options>. Leveraging the existing $scope.items (or any other suitable variable) is a cleaner approach when passing data to your list directive, as illustrated below:

.directive("list", function(){
  return {
    // other directive properties,
    scope: {
       list: "="
    },
    require: "ngModel",
    link: function(scope, element, attrs, ngModel){
       scope.$watchCollection("list", function(){
          ngModel.$validate();
          // additional actions upon list change
       });
       // implement validators, etc...
    }
  }
});

The directive can then be implemented as shown:

<input ng-model="foo" list="items">

This method not only utilizes Angular's data-watching capabilities but also enhances decoupling of logic from the DOM structure. Consequently, modifications such as changing element IDs or using different element types won't necessitate altering the directive itself.

Answer 4

It's essential to check out this insightful Stack Overflow discussion on mastering the thought process behind Angular development.

If you find yourself working with a <datalist> element and passing its id through the list attribute in your directive, the following code snippet might resemble what you're dealing with:

<datalist id="myDatalist">
  <options ng-repeat="item in items" value="{{item.value}}">{{item.label}}</options>
</datalist>

<input ng-model="foo" list="myDatalist">

Avoid attempting to extract values directly from the DOM elements like <options>. Leveraging the existing $scope.items (or any other suitable variable) is a cleaner approach when passing data to your list directive, as illustrated below:

.directive("list", function(){
  return {
    // other directive properties,
    scope: {
       list: "="
    },
    require: "ngModel",
    link: function(scope, element, attrs, ngModel){
       scope.$watchCollection("list", function(){
          ngModel.$validate();
          // additional actions upon list change
       });
       // implement validators, etc...
    }
  }
});

The directive can then be implemented as shown:

<input ng-model="foo" list="items">

This method not only utilizes Angular's data-watching capabilities but also enhances decoupling of logic from the DOM structure. Consequently, modifications such as changing element IDs or using different element types won't necessitate altering the directive itself.

Execute the validation directive using the digest cycle

Answer №1

Answer №2

Similar questions

Ways to avoid caching statically generated pages without having to enable ISR in Next.js

Managing Multiple Operations in Angular Firestore

Handling the display of divs using two select elements

The overflow hidden property does not seem to be effective when used in conjunction with parallax

The dilemma between Nuxt Js global CSS and Local CSS

Role Based Routing in React allows for different paths and components

"Implementing a sorting feature in a product filtering system with JavaScript/Vue, allowing

Checking to see if all the users mentioned in the message have been assigned a role

Exploring Vue Slots: A guide to parsing and rendering slot components

Automatically Populate Text Field with the URL of the Current Page

Node.js with ejs supports the inclusion of partials, but sometimes struggles to locate the variable that has been defined in the partial file

"Pressing the 'back' button on your browser takes

Arranging xCharts based on the weekday order

Navigate through a JSON data structure containing nested arrays

An issue arises when attempting to utilize the 'push()' method to append a string to a JSON array

When React object state remains unchanged, the page does not update automatically

Tips for extracting tables from a document using Node.js

How to verify that the user is using the most up-to-date version of the application in React Native

The function onClick does not function properly when used with the <p> element, but it works flawlessly with the <button> element

Jade incorporates a template that is dependent on a variable