######UPDATE : [See this solution](http://calendee.com/preventing-angularjs-from-hijacking-forms/#update).

It seems that every time I use a form and AngularJS, I end up going insane. Admittedly, most of this is due to my :

  • Non-exceptional JavaScript skills
  • My non-exceptional knowledge of AngularJS

However, sometimes, I think Angular just takes over a bit too much.

One great example is the "email" input type in forms. Angular believes an email address has not "changed" unless it has transitioned from valid to invalid or vice versa. So, you want to "observe" interaction in this form - too bad. The "ng-change" directive won't fire until the email has become valid or invalid.

I got the bright idea of tossing "ng-change" out the door and just watching it instead. Guess what? That doesn't work either. Again, unless the email field transitions from valid to invalid or vice versa, you are blind to the email field.

See this Fiddle for an example: http://jsfiddle.net/justbn/KKrSN/

Type into the email field and observe what happens to the "Email is Currently" section. The second you touch the email field, it becomes invalid. Theoretically, as I am watching the email field, the "Email is Currently" should update on every key stroke in the input. Unfortunately, it does not work. Until the "email" input is valid, the "Email is Currently" stays blank.

Suggestions for overriding Angular's hijacking of this? Right now, my only option seems to be changing the input type to "text". This option is less than optimal. Doing this means any context aware keyboards won't be used.

Comments:
Since I just dropped SquareSpace in favor of my self-hosted Ghost blog, I lost any existing comments. I'm just pasting the few comments in here:

Dayan:

The field is doing what its suppose to do, preventing the model gets populated with invalid values
checkout this fiddle
http://jsfiddle.net/Ukwev/4/
this is a simple way to use the email field and a counter that will show you how many times the change event is fired

Justin Noel in Response to Dayan:

Dayan,

Thanks for the response. I agree that is the intent of the AngularJS developers. However, that does not help when the developer needs to see activity in that field. Your example is quite like mine. AFTER a change, something happens. The problem is that the "change" only occurs when Angular determines the entry is valid.

What I want is a way to listen to an "email" type input whether it is valid or not. Right now, I can only do that by changing the input type from "email" to "text". Then, Angular doesn't hijack all visibility and I can watch it all I want.

Dayan:

link:function(scope,element,param){
	element.bind('keyup',function(){
		scope.variable=element.value();
	})
}

this could be the resumed link function body of your directive how you set the variable you want to update, depends on whether the scope is private and how loose you want the directive to be coupled. This is the right approach i think because you don't have to set extra watchers and get the value strait from the DOM and gives you room to do some more things in case you want to perform any styling depending on the value.