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 f

Answer 1

https://docs.angularjs.org/error/ngModel/numfmt describes how Angular considers it a programming error, not a user input error, if programmatic model changes don't respect the input's validation rules.

If your model does not contain actual numbers then it is up to the application developer to use a directive that will do the conversion in the ngModel $formatters and $parsers pipeline.

Their example describes a String model value for an but the same logic applies here, I think. If your input contains a minLength attribute, the scope should not get updated with strings that are too short.

So to fix it, add a custom directive to your input that pushes a custom parser into the $parsers pipeline.

For instance, the following directive will hold off writing the value of an to the scope until a long enough string has been typed into it:

.directive('min4', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
          return value && value.length >= 4 ? value : "";
        });
      }
    };
  });

This prevents the nasty interactions that otherwise occur when Breeze writes updated values back to the scope and ends up overwriting not-yet-legal state in the input.

See Plunker demo