Question

我有一个有2个字段的对象，而1应该小于或等于另一个字段。

说它是硬盘配额设置，我需要threshold小于或等于硬盘的size。

我正在尝试使用angular ui-utils#validate。

这就是我到目前为止的方式：http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview（我希望链接能够正常工作）

我遇到的问题是它适用于一个方向：

设置size然后使用threshold正常工作

但如果我尝试更改size，threshold处于无效状态后 - 没有任何反应。这是因为未在模型上设置无效threshold，并且size ID与null或undefined（或类似内容）进行比较。

一方面，我理解不在模型上设置无效值的逻辑......但是这里它正在阻碍我。

所以，任何帮助完成这项工作都将受到赞赏。

Answer 1

我玩过自定义指令并烹饪了适用于我的情况的东西。

在我对threshold的输入中，我有less-than-or-equal="quota.size"指令，将模型的属性传递给它进行验证（我希望quota.threshold小于或等于quota.size）：

<input type="number" name="threshold" 
    ng-model="quota.threshold" 
    required 
    less-than-or-equal="quota.size" />

在link指令的lessThanOrEqual函数中，它开始观看quota.size，当quota.size更改时，它只是尝试设置threshold的当前视图值在模特：

link: (scope, elem, attr, ctrl) ->
    scope.$watch attr.lessThanOrEqual, (newValue) ->
        ctrl.$setViewValue(ctrl.$viewValue)

然后有解析器通过调用scope.thresholdValidate(thresholdValue)方法传递候选值来进行验证。如果验证成功，此方法返回true，如果验证成功，则返回新值，否则 - 当前模型的值：

    ctrl.$parsers.push (viewValue) ->
        newValue = ctrl.$modelValue
        if not scope.thresholdValidate viewValue    
            ctrl.$setValidity('lessThanOrEqual', false)
        else
            ctrl.$setValidity('lessThanOrEqual', true)
            newValue = viewValue
        newValue

我正在将解析器推送到解析器集合，与大多数示例建议的解除对象相反，因为我想要有角度来验证required和number指令，所以我只有在这里才能到达有一个有效的解析数字（对我来说工作量较少，但对于text输入我可能应该进行解析工作）

这是我的游乐场：http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

Answer 2

迟到总比你好，你需要在表单输入元素中添加ng-model-options="{allowInvalid:true}"来阻止这种情况发生 - 问题是当一个承诺被拒绝时（例如使用$q或$http ）默认情况下，模型不会更新。疯了吧！花费我一天的时间来完成这项工作。

我专门针对这个问题写了一个plunkr - 相信我这个代码很好...... http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview

在AngularJS中使用依赖字段进行表单验证

2 个答案: