表单验证在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配额设置，我需要的阈值小于或等于HDD的尺寸。

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

我想使用角度的 UI-utils的＃验证。

这是怎么走到这一步：<一href=\"http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/$p$pview\">http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/$p$pview （我希望该链接将工作）

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:

设置尺寸，然后用打阈值工程确定

但是，如果我试图改变尺寸，在阈值是无效状态 - 没有任何反应。这是因为无效阈值未在模型和尺寸正在对比较ID 空集或未定义（或类似的东西）。

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.

因此​​，任何使这一工作，帮助将AP preciated。

So, any help making this work will be appreciated.

推荐答案

我打自定义指令和熟的东西，我的情况的作品。

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

在我的阈值我低于或相等=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 指令的链接功能，它开始看 quota.size 当 quota.size 更改它只是尝试设置阈值电流值观上型号：

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）方法传递给它的候选值确实验证解析器。这个方法返回真正如果验证成功，如果它 - 它返回新的值，否则 - 目前的模式值：

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

我推解析器解析器收藏，相反unshifting它最喜欢的例子表明，因为我要的角度来验证要求和数量指令，所以我来到这里只是如果我有一个有效的和解析数（对我的工作更少，但文本输入我也许应该做解析工作）​​

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)

下面是我的游乐场：<一href=\"http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/$p$pview\">http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/$p$pview

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