Javascript 对Breeze使用角度验证指令会阻止任何无效的输入

如果将任何用于验证的角度指令（ng minlength、ng maxlength、ng pattern等）添加到绑定到breeze实体的输入中，则如果发现无效，将阻止任何用户输入

如果ng模型中的值最初是有效的，则会显示该值，但如果将该值更改为无效值，则会清除输入字段，将模型设置为null，并且不能输入任何可能最初无效的内容。但是，如果将有效值复制到显示的字段中

如果模型值在无效时被设置为null，如果它没有清除输入，那么就阻止更改，我可以接受这一事实

另外，我有一种感觉，无论是什么原因导致了这个问题，也弄乱了ui掩码。同样的事情在没有角度验证指令的情况下也会发生

下面是我从一个类似问题中找到的一个Plunker，我修改了它以显示我的问题：

---

编辑

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

它首先与angular在通过$Parser和$formatters时，如果任何验证器失败，则将$modelValue设置为“undefined”，从而进行验证的方式有关

我在Angular（第16331行）中找到了这段代码，每个Angular验证器都会调用它：

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

我将其更改为返回“value”而不是“undefined”：

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

      return value;
    }

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

我怀疑当Angular将$modelValue设置为“undefined”时会出现问题，然后Breeze会看到模型已更改并更新实体，然后更新模型，然后清除输入，依此类推。。。或者类似的事情

---

我发现这对我的探索很有帮助。也许这会对你们中的一位知道的比我多得多的人有所帮助

我很高兴看到你们的战利品，看看微风能不能对此做些什么

我并不十分惊讶。我记得，当您将它与HTML5验证相结合时，Ng也会遇到困难。我认为你真的应该只使用一个方案

你不同意吗

---

另外，您是否考虑过zValidate指令？我们认为这是在视图中暴露微风实体验证错误的最好方法。

< P>另一个要考虑的解决方案是使用角1.3 +./p>可用的属性。 通过这种方式，可以防止每次按键后出现角度摘要，而是将其推迟到“模糊”事件，以便用户有机会实际输入有效数据

它看起来是这样的：

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

但是，这仍然有一个限制，即如果输入无效的输入，则在模糊时，输入将被清除，用户必须再次输入。在我看来，用户不是很友好，所以我将尝试使用breeze-only方法来规避这个问题

---

然而，我认为这个解决方案在这里也值得一提。

Angular 1.3.0-rc.1引入了

allowInvalid

选项，用于

ngModelOptions

指令。它本质上是对OP在第16331行的攻击的形式化。该选项指示Angular允许将无效表单输入写入$scope，并巧妙地解决了该问题

用法：

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

有关更多信息，请参阅此功能请求：。

说明如果编程模型更改不遵守输入的验证规则，Angular如何将其视为编程错误，而不是用户输入错误

如果您的模型不包含实际的数字，则应由应用程序开发人员使用一个指令，该指令将在ngModel$formatters和$parsers管道中进行转换

他们的例子描述了一个

的

字符串

模型值，但我认为同样的逻辑在这里也适用。如果输入包含minLength属性，则不应使用太短的字符串更新范围

因此，要修复它，请在输入中添加一个自定义指令，将自定义解析器推送到

$parsers

管道中

例如，以下指令将推迟将

的值写入作用域，直到在其中键入足够长的字符串：

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

这防止了当Breeze将更新的值写回作用域并最终覆盖输入中尚未合法的状态时发生的恶劣交互

---

请参见

谢谢您的回复。我只编写了几个月的程序，所以老实说，我还没有研究哪种验证方法是最好的。我相信你完全正确地将breeze用于验证，但这需要我花更多的时间使用C#和实体框架，我只学到了足够的知识来设置我的WebAPI并使其与breeze愉快地工作。我现在手头都是Javascript。请参阅我的编辑，了解到目前为止我在这个问题上的发现。我想在C#中使用客户端JavaScript验证（stock和custom），而不是服务器端验证。但是现在您已经提到了，如果验证在客户机上很重要，那么它们也必须写在服务器上。。。出于安全原因。你会及时赶到的。我还没有在那里测试过。你有理由不相信吗？你好，沃德，我遇到了上述问题-我的输入字段使用ng required，ng minlength导致输入字段停止工作，如上所述。然而，我在表单级别使用了novalidate，我认为它应该禁用HTML5验证。当你说我们应该只使用一个验证方案时，这不是应该怎么做吗？谢谢你把问题贴出来。我遇到了与Breeze阻止ui屏蔽输入相同的问题。我绕过了这个问题，使用了一个临时输入模型，然后将其处理到