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

Question

If you add any of the angular directives for validation (ng-minlength, ng-maxlength, ng-pattern, etc.) to an input that is bound to a breeze entity it blocks any user input if found to be invalid.

If the value from ng-model is initially valid it shows up, but if you change the value to something invalid the input field is cleared, the model is set to null, and you can't input anything that may be initially invalid. However if you copy a valid value into the field it shows.

I would be fine with the fact that the model value is set to null when invalid if it didn't clear the input then prevent changes.

Also I have a feeling that whatever is causing this issue is also messing up ui-mask. The same thing happens there just without the angular validation directives.

here is a Plunker I found from a similar question that I modified to show my issue: http://plnkr.co/edit/dVsF7GFY65a30soLL5W8?p=preview

---

Edit

After many many hours of research I did find a solution that works although I am not sure of any ill side effects.

It has to do with how angular does validation in the first place by setting the $modelValue to 'undefined' if it fails any validators as it makes it's way through $parsers and $formatters.

I found this code in Angular (line 16331) that gets called by each angular validator:

function validate(ctrl, validatorName, validity, value){
  ctrl.$setValidity(validatorName, validity);
  return validity ? value : undefined;
}

I changed it to return 'value' instead of 'undefined':

function validate(ctrl, validatorName, validity, value){
      ctrl.$setValidity(validatorName, validity);

      return value;
    }

Angular still sets validation correctly. Although I am sure this isn't the best solution or even a good one.

I suspect the problem arises when Angular sets $modelValue to 'undefined' then Breeze sees that the model has changed and updates the entity which then updates the model which then clears the input and so forth... Or something like that...

I found this to be helpful in my quest. Maybe it will be helpful to one of you that knows much more than I https://github.com/angular/angular.js/issues/1412

Answer 1

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.