1

I got a simple, or really weird question:

In angular official forms tutorial, there is a section "Custom Validation":
http://docs.angularjs.org/guide/forms

and I copy the code to Plunker:
http://plnkr.co/edit/6pcUJNUD3Zkyv5bx6OTe?p=preview

What I want is the input need to do 2 validation: required and smart-float, for now, the Plunker code works fine.

But if you change the directive name "smart-float" to the other one, like "all-eng", it turn to a small problem:
if you input something not a float number, it show "required" and "float" validation error both

I tried with Chrome 33, Firefox 27, no luck
google "angularjs directive name restrict", no luck
google "angularjs directive name smart-float", no luck
upgrade my angularjs from 1.2.13 to 1.2.15, no luck

Is this a bug? Anyone give me a hint?

ALex
  • 15
  • 5

1 Answers1

2

This has to do with the order the validations are applied. It seems at some point, Angular is using the alphabetical order of the name of the directives to order their execution. So smartFloat comes after required, while allEng comes before.

By changing the order of directive execution, their parsers get different positions in the $parsers stack. So in the allEng case, your directive (and parser) gets executed before require. What happens if the input is a malformed number? Your parser returns undefined. This in turns triggers the required parser to believe the value does not exist - thus display an error!

You can play with the name of your directive to verify this behaviour.

Check a related issue: Angularjs form validation order

Community
  • 1
  • 1
Nikos Paraskevopoulos
  • 39,514
  • 12
  • 85
  • 90