Form Input Validation Doesn't Work In Angular Forms (with Plunkr)

EDIT: PLUNKR is updated and demonstrates the issue! I have a feeling my design is flawed, but I did the following: (Simplified example of the issue:) .directive('awesomeInput', fu

Solution 1:

Your directive also has the template shown here:

        template: '<div class="text-danger registrationError center-block" ng-show="form.awesome.$dirty && form.awesome.$invalid"><div ng-show="form.awesome.$error.minlength">MINLENGTH</div></div>'

Which is replying on form. But since your directive has an isolate scope, it's not behaving like you'd expect. Simply passing in the form to the directive seems to do the trick: http://plnkr.co/edit/TlgXH0mDf6nzj4v3fTiG?p=preview

// In isolate scope
'form': '='
// On directive form="form"

Now they both have the MINLENGTH error.

EDIT: addressing the naming issue.

This is actually a really cool bug. It turns out that the naming is important because if the priority of directives are the same, it evaluates them alphabetically! this means if your directive is lexicographically before ng-model, such as "awesome", it will evaluate yours first. But if it's after, like "sweaty" it will do the ng-model first.

In order to fix this, for any name, you just need to add a priority to your directive that is higher than the default priority (which ng-model uses) of 0.

priority: 1,

Here is a plnkr to play with that has this shown: http://plnkr.co/edit/y6jQa0NilQcgv0WcSCUH?p=preview

Really cool bug you found there!

Hope this helped!