How to create an angular validation message directive

Question

I am new to angular and maybe trying to do the wrong thing.

What I am trying to, is to create a validation message directive, which can show validation message for a specific input field in a form. It should only show the validation message for required fields in case the input field is missing a value.

I've tried with the following HTML:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>    
    <form name="myForm">
  <input name="myInput" type="text" x-ng-model="object.input" required/><br/> 
  <span ng-show="myForm.myInput.$error.required" >Value required (working)</span><br/>
     <span x-msg-required="myForm.myInput"></span>
    </form>
  </body>
</html>

and the JS:

var app = angular.module('myApp', []);
app.directive('msgRequired', function() {
  return {
    link : function(scope, element, attrs) {
      element.text('Value required');
      attrs.$set('ngShow', attrs.msgRequired + '.$error.required' );
    }
  };

});

The first span element with out directive shows the validation message as expected. The span element with my directive seems to always show the validation message. I am for sure not understanding the directives in angular. What am I missing or is there better ways of streamlining validation messages in angular?

There is a plunker: http://plnkr.co/edit/Gjvol8inw1DlWjHomZQw

In case you haven't seen them, there's an excellent tutorial on angularjs form validation here: blog.brunoscopelliti.com/form-validation-the-angularjs-way and one on custom form validation directives here: shazwazza.com/post/… Hope that helps. — Pauli Price
– Pauli Price, Commented Aug 29, 2013 at 14:54

John Culviner · Accepted Answer · 2014-01-31 05:15:57Z

I was also bothered by this with Angular and created a directive suite in AngularAgility called Form Extension to fix this very issue. It automatically generates validation messages for you based on whats on your element. It is also very configurable and even will generate labels for you if you'd like.

Consider normally having to type something like this to get validation:

<div ng-form="exampleForm">
    <label for="firstName">First Name *</label>
    <div>
        <input type="text" id="firstName" name="firstName" ng-model="person.firstName"
               ng-minlength="2" />
        <div ng-show="exampleForm.firstName.$dirty && exampleForm.firstName.$error.minlength">
            First Name must be at least 2 characters long.
        </div>
    </div>
</div>

That's a pain. With the plugin you can do something like this instead:

<div ng-form="exampleForm">
    <div>
        <input type="text" aa-auto-field="person.firstName" ng-minlength="2" />
    </div>
</div>

Here are some relevant links:

Extensive demo

Blog post explaining it

Source on GitHub

nathanpr · Accepted Answer · 2013-11-18 19:45:58Z

0

So I see this is a couple months old, but in case anyone is looking for something that works:

I updated your Javascript to this:

var app = angular.module('myApp', []);

app.directive('msgRequired', function($compile) {
    return {
      //transclude: true,
      restrict: "A",
        link: function(scope, element, attrs) {
            element[0].innerHTML = 'Value required in angular directive';
            attrs.$set('ngShow', attrs.msgRequired + ".$error.required");

            $compile(element)(scope)
        }
    };
  });

which seems to work. I am however doing something VERY similar in another project, and getting an infinite compile loop :( Investigating that...

plnkr lives here.

answered Nov 18, 2013 at 19:45

nathanpr

511 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to create an angular validation message directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related