将 Angular 验证指令与 Breeze 结合使用会阻止任何无效输入 [英] using Angular validation directives with Breeze blocks any input that is invalid

问题描述

如果您向绑定到微风实体的输入添加任何用于验证的角度指令(ng-minlength、ng-maxlength、ng-pattern 等)，如果发现无效，它将阻止任何用户输入.

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.

如果来自 ng-model 的值最初是有效的，它会显示出来，但是如果您将值更改为无效的值，则输入字段将被清除，模型将设置为空，并且您无法输入任何最初可能为无效的.但是，如果您将有效值复制到它显示的字段中.

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.

如果模型值在无效时设置为 null 如果它没有清除输入然后阻止更改，我会很好.

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.

我也有一种感觉，无论是什么原因导致这个问题也搞砸了 ui-mask.同样的事情在没有角度验证指令的情况下也会发生.

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.

这是我从类似问题中找到的一个 Plunker，我修改了该问题以显示我的问题:http://plnkr.co/edit/dVsF7GFY65a30soLL5W8?p=preview

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

编辑

经过许多小时的研究，我确实找到了一个有效的解决方案，尽管我不确定是否有任何不良副作用.

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

它首先与 angular 如何进行验证有关，如果它通过 $parsers 和 $formatters 使任何验证器失败，则将 $modelValue 设置为undefined".

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.

我在每个角度验证器调用的 Angular(第 16331 行)中找到了这段代码:

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 仍然正确设置验证.尽管我确信这不是最好的解决方案，甚至不是好的解决方案.

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

我怀疑当 Angular 将 $modelValue 设置为未定义"时出现问题，然后 Breeze 看到模型已更改并更新实体，然后更新模型，然后清除输入等等......或类似的东西...

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...

我发现这对我的探索很有帮助.也许这对你们中比我了解得多的人会有所帮助 https://github.com/angular/angular.js/issues/1412

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

推荐答案

Angular 1.3.0-rc.1 引入了 allowInvalid 选项以与 ngModelOptions 指令一起使用.它本质上是 OP 在第 16331 行的 hack 的形式化.该选项指示 Angular 允许将无效的表单输入写入 $scope，并巧妙地解决了问题.

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.

用法:

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

查看此功能请求以获取更多信息:https://github.com/angular/angular.js/issues/8290.

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

这篇关于将 Angular 验证指令与 Breeze 结合使用会阻止任何无效输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！