Custom Angular JS directive for validation

Question

I'm new to JavaScript and Angular JS. I have to write a custom directive to validate the content of an input field passed in an .aspx page; more precisely I have to check if an username with the value passed in the input already exists. In my directve I have to call a service that checks for duplicates in the db and afterwards depending on the result I have to perform a success callback/error callback and to return an object containing info about the validation check and a message to diplay. In particular I'm stuck on this last part regarding callbacks and returning an object with info (in my version I cannot use $.defer).

Unfortunaltely, I cannot take advantage of the already existing custom validation for forms provided by Angular (that is $asynchrounous validators and $q.defer) as I have to use an older version of Angular 1.2.26. Could you provide me some hints/examples on how to achieve it? I'm trying hard but I still find custom directives a bit difficult and I cannot find examples for custom validation (except for those based on Angular 1.3 $asynch validators).

Thank you in advance

Erenn · Accepted Answer · 2015-01-15 10:23:01Z

1

You can easily use $http service in your directive's link or controller function and do operations with response data. What is the problem exactly can you be more clear?

answered Jan 15, 2015 at 10:23

Erenn

6836 silver badges20 bronze badges

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

5 Comments

OuterSpace Over a year ago

Yes I've used $http service to call my service for validation (and everything is fine there). What I don't understand is afterwards my service call, how to implement the success/error callbacks to provide a mechanism similar to $.when $.resolve $.reject so as to mimic $q.defer. Thank you

Erenn Over a year ago

` function login(username, password) { return $http.post(API_URL = '/login', { username: username, password: password }).then(function success(response) { AuthTokenFactory.setToken(response.data.token); return response; }); }` Here is a code snippet from companies code base.

Erenn Over a year ago

promise.then(function(greeting) { alert('Success: ' + greeting); }, function(reason) { alert('Failed: ' + reason); });

OuterSpace Over a year ago

thank you very much! So, if I understood right the ".then" part will mimic the $q.defer, right? Then, to display the result object fields' data, that is: validity status and error message I have to define a one way binding in the .aspx right? thanks

Erenn Over a year ago

I guess so. $http returns a promise object and you can use ".then()" on that object to get data and do operations with that data.

yangli-io · Accepted Answer · 2015-01-15 10:56:25Z

0

You can write your own directive for this: example

app.directive('asyncNameCheck', function($http){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attr, ngModel){
      elm.bind('input', function(){
        ngModel.$setValidity('asyncValid', false);
        $http.get('http://graph.facebook.com/facebook')
          .success(function(data){
            ngModel.$setValidity('asyncValid', true);
          });
      })
    }
  }
})

and in the html

<form name="myform">
  <input name="testfield" async-name-check required ng-model="test"/>
  <p ng-show="myform.testfield.$error.asyncValid">This field is invalid</p>
</form>

Just note that this directive is not a reusable one but works for your requirements. Do not do this in the controller, I've spent a lot of time with angular validation and if you're controlling validation in the controller, it will cause you alot of issues later on.

answered Jan 15, 2015 at 10:56

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

2 Comments

OuterSpace Over a year ago

Ok,thank you very much for the example. I don't know if $setValidity is available in my Amgular version but I will check.

yangli-io Over a year ago

when I was working with 1.0.8 I initially had the same problem. I tried to control validity with the controller and it caused a lot of issues. However, when I discovered $setValidity in 1.0.8, life was awesome. Note this can only be done in a directive.

Collectives™ on Stack Overflow

Custom Angular JS directive for validation

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related