How implementing a directive to validate another field (custom form in angularjs)

Question

I have a validation custom form, I use validate-message-character="{{compose.limitCharacter - compose.message.length}}" in a select and textarea like this

            <form class="form-horizontal" role="form" name="composeForm" >

            <select ng-change="limitComposeCharacter()" ng-selected="compose.profile" 
             ng-model="compose.profile" ng-options="userId in profiles" name="profile" 
             validate-message-character="{{compose.limitCharacter - compose.message.length}}" required>
            </select>

               number Character: {{compose.limitCharacter - compose.message.length}}

            <textarea class="form-control" ng-model="compose.message" name="message" 
    validate-message-character="{{compose.limitCharacter - compose.message.length}}" 
required></textarea>
              Form validity: {{composeForm.$valid}}

I have something like this:

1° Select User has compose.limitCharacter = 100
2° Select User has compose.limitCharacter = 200 etc etc.

This is my directive to check number Character is > 0

angular.module('App')
  .directive('validateMessageCharacter', function () {
    return {
      require: 'ngModel',
      link: function postLink(scope, element, attrs, c) {
        scope.$watch(attrs.ngModel, function() {
            console.log(attrs.validateMessageCharacter);
            if(attrs.validateMessageCharacter < 0)
            {
                c.$setValidity('maxCharacter', false);
                c.$invalid = true;
            }else{
                c.$setValidity('maxCharacter', true);
                c.$invalid = false;
            }

        });
      }
    };
  });

It doesn't work proply when change select without change the textarea some advice?

what i have to do to get fiddler? I put console.log(attrs.validateMessageCharacter); but print only a number of character. — Silvio Troia
– Silvio Troia, Commented Apr 8, 2014 at 10:20
No, I said fiddle, as in jsfiddle.net (or plankr or jsBin or CodePen or whatever). You create a little app (basically an HTML file and a JS file) that contain all necessary components to demonstrate the problem. — gkalpak
– gkalpak, Commented Apr 8, 2014 at 10:29

yccteam · Accepted Answer · 2014-04-08 14:04:23Z

2

First, using an advice from the angular google group, I changed the scope.$watch to attr.$observe. Second, the reason it validated only after typing text is that the text area is a required field. Your code works here: http://plnkr.co/edit/YvsuLoHzX9eqb7FhDgXA?p=preview

answered Apr 8, 2014 at 14:04

yccteam

2,3114 gold badges29 silver badges51 bronze badges

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

1 Comment

Silvio Troia Over a year ago

Tnx a lot. you are fantastic :D

Collectives™ on Stack Overflow

How implementing a directive to validate another field (custom form in angularjs)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related