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

Oops! An issue has occurred where I am unable to access certain properties (specifically 'Symbol(__APOLLO_CONTEXT__)') while utilizing the Apollo provider

The data in AngularJS is not being successfully incorporated into the service

Creating types for React.ComponentType<P> in Material-UI using TypeScript

Establishing the preset values for Material-UI toggle button group

Is it possible to manage the form submission in React after being redirected by the server, along with receiving data

Is it possible to adjust the color of the iOS status bar using NativeScript, Angular 2, and TypeScript?

Emphasizes the P tag by incorporating forward and backward navigation options

webpackDevMiddleware does not automatically trigger a reload

Transformation of looks post a refresh

Using the fetch method to consume a RapidAPI JSON response

LESS: Using variable values in mixin and variable names

What is the best way to create a JavaScript function that can be used for multiple expandable cards in HTML and CSS?

Is it possible to switch states in Angular UI Router without altering the URL?

Clear cache folders in the cordova and ionic file systems to free up space

Load website content in real-time

Accessing files from the local system using AngularJS

Issue with Alignment of Border in PDF [Example Included]

Only trigger the function for a single bootstrap modal out of three on the current page

Koa and Stripe are patiently holding off on displaying the page

Is Ember CLI experiencing issues due to the latest Ember Data update?