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

Question

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

说它是硬盘配额设置,我需要threshold小于或等于硬盘驱动器size.

我正在尝试使用angular的ui-utils #validify.

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

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

设置size然后播放threshold工作正常

但如果我试图改变size,在threshold处于无效状态之后 - 没有任何反应.这是因为threshold未在模型上设置无效,并且size正在与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

我正在将解析器推送到解析器集合,与大多数示例建议的那样相反,因为我希望使用angular来验证required和number指令,所以只有当我有一个有效且解析的数字时才会到达这里(对我来说工作量较少,但是对于text输入我可能应该做解析工作)

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