AngularJS 中依赖字段的表单验证 [英] Form Validation with Dependent Fields in AngularJS

问题描述

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

I have an object that has 2 fields, while 1 should be less than or equal to another.

假设是 HDD 配额设置，我需要 threshold 小于或等于 HDD 的 size.

Say it's HDD quota settings and I need the threshold to be less than or equal to HDD's size.

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

I am trying to use angular's ui-utils#validate.

这就是我到目前为止的方式:http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview(我希望链接有效)

This is how I got so far: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview (i hope the link will work)

我遇到的问题是它向一个方向起作用:

The problem that I am having is that it works to one direction:

设置size，然后使用threshold 就可以了

Setting size and then playing with threshold works ok

但是如果我尝试更改 size，在 threshold 处于无效状态之后 - 什么也没有发生.这是因为没有在模型上设置无效的 threshold 并且 size id 与 null 或 undefined(或类似的东西).

But if I try to change size, after threshold is in invalid state - nothing happens. This is because invalid threshold is not set on the model and size id being compared against null or undefined (or something like that).

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

On one hand I understand the logic of not setting invalid value on the model... but here it is getting in my way.

因此，我们将不胜感激.

So, any help making this work will be appreciated.

推荐答案

我玩过自定义指令，并为我的情况准备了一些适合的东西.

I have played with custom directives and cooked something that works for my case.

在我的 threshold 输入中，我有 less-than-or-equal="quota.size" 指令，将模型的属性传递给它以进行验证(我想要quota.threshold 小于或等于 quota.size):

On my input for threshold I have less-than-or-equal="quota.size" directive, passing it the model's property to validate against (I want quota.threshold to be less than or equal to quota.size):

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

在lessThanOrEqual 指令的link 函数中，它开始观察quota.size 和quota.size更改它只是尝试在模型上设置 threshold 的当前视图值:

In link function of lessThanOrEqual directive it starts to watch the quota.size and when quota.size changes it just tries to set the current view value of threshold on model:

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

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

Then there is the parser that does the validation by calling scope.thresholdValidate(thresholdValue) method passing it the candidate value. This method returns true if validation succeeded and if it does - it returns the new value, otherwise - current model's value:

    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 输入，我可能应该做解析工作)

I am pushing the parser to parser collection, as opposite to unshifting it like most of the examples suggest, because I want angular to validate required and number directives, so I get here only if I have a valid and parsed number (less work for me, but for text inputs I probably should do the parsing job)

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

这篇关于AngularJS 中依赖字段的表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！