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

【问题标题】：Form Validation with Dependent Fields in AngularJS在 AngularJS 中使用依赖字段进行表单验证
【发布时间】：2013-05-28 17:49:13
【问题描述】：

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

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

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

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

我遇到的问题是它向一个方向工作：

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

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

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

因此，我们将不胜感激。

【问题讨论】：

这里正在讨论这个问题：github.com/angular-ui/ui-utils/issues/25
迟到总比没有好，您需要在表单输入元素中添加 ng-model-options="{allowInvalid:true}" 以阻止这种情况发生 - 问题是当 $q 服务拒绝时默认情况下，模型不会更新的响应。疯了吧！花了我一天的时间解决这个问题。

标签： javascript angularjs validation angular-ui

【解决方案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" />

在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

我将解析器推送到解析器集合，这与大多数示例建议的那样不移动它相反，因为我希望 angular 验证 required 和 number 指令，所以只有当我有一个有效的和解析后的数字（对我来说工作较少，但对于text 输入，我可能应该做解析工作）

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

【讨论】：

【解决方案2】：

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

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

【讨论】：