Same directive to multiple inputs. it's possible? AngularJS

Question

I hope u can help me.

I have a directive:

.directive('checkField', ['$http', function($http) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, ele, attrs, c) {
            scope.$watch(function() {
                if (attrs.ngModel === 'data.gender_value' && ele.val() !== '') {
                    //valid
                } else {
                    //error
                }

                if (attrs.ngModel === 'data.cardholder_value' && ele.val() !== '') {
                    //valid
                } else {
                    //error
                }
            });
        },
        template: ''
    };
}])

And i have multiple inputs in my html:

<input ng-model="data.cardholder_value" type="text" size="50" data-check-field />
<input ng-model="data.gender_value" type="text" ng-required="true" data-check-field />

The problem is that watch trigger only "see" the first input, no more.

I'm trying to use de same directive to multiple inputs, but doesn't work. If i do an alert, to check the attribute name of field, always display "data.cardholder_value", never other name field.

Thank u in advance.

Edit 1:

This is my html calling (ng-include):

<form method="post" id="formQuestion" name="formQuestion" ng-submit="sendForm()" novalidate ng-controller="questionForm">
{{data | json}}
<div class="slide-animate" ng-include="'/templates/default/partials/_fields/1_card_type.html'"></div>
<div class="slide-animate" ng-include="'/templates/default/partials/_fields/2_gender.html'"></div>

My app controller:

angular.module('app.controllers')
.directive('checkField', ['$http', function($http) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, ele, attrs, ctrl) {
            scope.$watch(attrs.ngModel, function(val) {
                console.log(attrs.ngModel, attrs.name, val)
            });
        },
        template: ''
    };
}])
.controller('questionForm', ['$scope', '$http', 'fieldApiService', function ($scope, $http, fieldApiService) {
...

PSL · Accepted Answer · 2015-02-04 21:49:33Z

2

All you just need it to watch the value of ng-model directive attribute, right now you provided the watcher function as your validation function which mean when it sees function as first argument for the watch it will just only look for the return value from that function to determine if watch listener needs to run or not during every digest cycle.

      scope.$watch(attrs.ngModel, function(val) {
            if (!val) {
                //valid
            } else {
                //error
            }
        });

Also remember if you want to catch the user entered values you can always use the existing $viewChangeListener property on ngmodel, it will avoid reuse of existing internal watcher and no need to explicitly create one.

   c.$viewChangeListeners.push(function(){
       console.log('viewChange', ctrl.$viewValue)
    });

Demo

angular.module('app', []).directive('checkField', ['$http',
  function($http) {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function(scope, ele, attrs, ctrl) {
        scope.$watch(attrs.ngModel, function(val) {
          console.log(attrs.ngModel, attrs.name, val)
        });
        ctrl.$viewChangeListeners.push(function(){
           console.log('viewChange', ctrl.$viewValue)
        });
      },
     };
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <input ng-model="data.cardholder_value" name="cardholder" type="text" size="50" data-check-field />
  <input ng-model="data.gender_value" name="gender" type="text" ng-required="true" data-check-field />
</div>

edited Feb 4, 2015 at 21:49

answered Feb 4, 2015 at 21:44

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sommer Over a year ago

Hi PSL, The problem is that my code works only for the first input, the other inputs do not work. So the code that you pass me only shows the value of the first input. Thanks for ur answer.

PSL Over a year ago

@Sommer see my demo, i have both inputs there and look at the console, i am logging it there

PSL Over a year ago

@Sommer Did you look at my demo? and do you see both the changes gets logged? press f12 and open the console if you are on windows

Sommer Over a year ago

thank you for your help. Checking your code, i see other problem: the inputs are called in ng-include. When i copy and paste my html inputs direct to my form, ur code works cool. But when use ng-include to call the inputs, the directive code doesn't work. Maybe u know what i'm missing?

PSL Over a year ago

ng-include creates a child scope so you need to make sure the bound model is updated properly (ensuring dot rule). can you show how it is structured.

|

Collectives™ on Stack Overflow

Same directive to multiple inputs. it's possible? AngularJS

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related