javascript - 将 Angular 验证指令与 Breeze 一起使用会阻止任何无效输入

Question

如果您将任何用于验证的 Angular Directive(指令)(ng-minlength、ng-maxlength、ng-pattern 等)添加到绑定(bind)到 breeze 实体的输入，如果发现无效，它会阻止任何用户输入。

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

如果模型值不清除输入然后阻止更改，那么在无效时将模型值设置为空这一事实我会很好。

另外我有一种感觉，不管是什么原因导致了这个问题，也搞砸了 ui-mask。如果没有 Angular 验证指令，同样的事情也会发生。

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

---

编辑

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

它首先与 Angular 如何通过将 $modelValue 设置为 'undefined' 进行验证有关，因为它在通过 $parsers 和 $formatters 时无法通过任何验证器。

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

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

我将其更改为返回“值”而不是“未定义”:

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

      return value;
    }

Angular 仍然正确设置验证。虽然我确信这不是最好的解决方案，甚至不是一个好的解决方案。

我怀疑当 Angular 将 $modelValue 设置为“undefined”然后 Breeze 发现模型已更改并更新实体时出现问题，实体随后更新模型，然后清除输入等等......或类似的东西。 ..

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

Answer 1

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

用法:

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

有关更多信息，请参阅此功能请求:https://github.com/angular/angular.js/issues/8290 .