AngularJS中带依赖字段的表单验证

Form Validation with Dependent Fields in AngularJS

本文关键字：表单 验证 字段 依赖 AngularJS      更新时间：2023-09-26

我有一个对象，它有两个字段，其中一个应该小于或等于另一个。

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

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

这是我如何得到到目前为止:http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview(我希望链接将工作)

我遇到的问题是它在一个方向上工作:

设置size，然后玩threshold工作ok

但是如果我试图改变size，在threshold处于无效状态之后-什么都没有发生。这是因为在模型上没有设置无效的threshold，并且将size id与null或undefined(或类似的东西)进行比较。

一方面我理解在模型上不设置无效值的逻辑…但它却妨碍了我。

所以，任何帮助使这项工作将是感激的。

我已经使用了自定义指令，并为我的情况做了一些工作。

在我的输入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" />

在lessThanOrEqual指令的link函数中，它开始观察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

迟来总比不来好，你需要添加ng-model-options="{allowInvalid:true}"到你的表单输入元素来阻止这种情况的发生-问题是，当一个承诺被拒绝(例如使用$q或$http)模型，默认情况下，不更新。疯了啊!我花了一天才算出来。

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

相关文章：