using Angular validation directives with Breeze blocks any input that is invalid using Angular validation directives with Breeze blocks any input that is invalid angularjs angularjs

using Angular validation directives with Breeze blocks any input that is invalid


Angular 1.3.0-rc.1 introduced the allowInvalid option for use with the ngModelOptions directive. It is essentially a formalization of the OP's hack at line 16331. The option instructs Angular to allow invalid form inputs to be written to $scope, and solves the problem neatly.

Usage:

<input type="email" ng-model-options="{allowInvalid: true}" ng-model="my_breeze_model.email"/>

See this feature request for more information: https://github.com/angular/angular.js/issues/8290.


I'm happy to look at your plunker and see if there is something Breeze can do about this.

I'm not terribly surprised. Ng also struggles when you combine it with HTML 5 validation as I recall. You really should only use one scheme I think.

Do you disagree?

Also, have you considered the zValidate directive in the Breeze Labs breeze.directives.js? We think that is the best way to expose Breeze entity property validation errors in the view.


Another solution to consider is to use the ng-model-options attribute made available with Angular 1.3+.

In this way, you can prevent the Angular digest occurring after every keypress, and instead defer it to, for example, the 'blur' event so that the use has a chance to actually enter the valid data.

It would look like this:

<input type="email" ng-model="customer.email" ng-model-options="{ updateOn: 'blur' }">

However, this still has the limitation that if you enter invalid input, on blur the input will be cleared out and the use will have to enter it all again. Not very user friendly in my opinion, so I'll be trying out the breeze-only approach to circumvent this issue.

However, I thought this solution was also worth mentioning here.