AngularJS - 表单自定义验证 - 检查至少一个输入是不是为空

Posted 2023-03-05

【中文标题】AngularJS - 表单自定义验证 - 检查至少一个输入是不是为空

【英文标题】：AngularJS - Form Custom Validation - Check if at least one input is emptyAngularJS - 表单自定义验证 - 检查至少一个输入是否为空

【发布时间】：2013-08-18 03:12:03

【问题描述】：

给定一个像这样的简单 html 表单：

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
... submit input and all the other code...
</form>

如果至少有一个输入为空，我需要您的帮助来了解如何检查验证时间。所需的验证如下。用户必须至少完成一项首选项。

使用 jQuery 这个：

if ( $("input").val() == "" ) 

工作正常，但想弄清楚如何使用 angular 来做同样的事情。

非常感谢，

吉列尔莫

【参考方案1】：

我的解决方案如下：

        $scope.requiredInputsGroup = function () 
            var isRequired = true;
            if (!$scope.shipment) 
                return true;
            
            angular.forEach(["userPreference1", "userPreference2", "userPreference3"], function (input) 
                if ($scope.shipment[input]) 
                    isRequired = false;
                    return false;
                
            );

            return isRequired;
        ;

您将该方法应用于每个输入中的data-ng-required...

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference1" ng-required="requiredInputsGroup()" />
   <input name="userPreference2" type="text" ng-model="shipment.userPreference2" ng-required="requiredInputsGroup()" />
   <input name="userPreference3" type="text" ng-model="shipment.userPreference3" ng-required="requiredInputsGroup()" />

   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

我应用的最后一点是使用简单的myForm.$invalid 禁用按钮

【讨论】：

很好的解决方案！我对其进行了更改，以便您可以传递您正在测试的模型，而不是将数组传递给 forEach。唯一的问题是针对未选中时返回“N”的复选框进行测试，但这很容易在 if 中检查。谢谢！

【参考方案2】：

所以我们的想法是在所有输入都为空的情况下禁用提交按钮。你可以这样做

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference1" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference2" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference3" />

   <button type="submit" ng-disabled="!(!!shipment.userPreference1 || !!shipment.userPreference2  || !!shipment.userPreference3)">Submit</button>
</form>

!!str 是强制将str 转换为boolean 值。 !!null 和 !!"" 都被评估为 false。

Demo

【讨论】：

sza，感谢您的回答！用户不需要输入所有字段，只需输入一个，因此我需要在验证时检查是否填充了至少一个输入。

@Guillermo 那么他们应该有不同的模型。

@Guillermo Checkout ng-repeat。请记住，AngularJS 是数据/模型驱动的，如果您想在正常情况下操作 dom，只需考虑如何设计数据结构。并且 angularjs 会神奇地为你改变 dom。

有更好的方法来做到这一点。在您的每个输入中，添加 ng-required。这将导致您的表单控制器运行验证，然后您的 语句简单地变为 ng-disabled="frmTicket.$invalid"

您不需要 !! 字符串 - 只需使用 !(shipment.userPreference1 || shipment.userPreference2 || shipment.userPreference3)

【参考方案3】：

您可以在输入元素和样式/代码中设置“必需”，并使用表单的 $valid 来处理您想要的方式。查看http://dailyjs.com/2013/06/06/angularjs-7/

【讨论】：

Mouli，谢谢你的回答，我知道这很奇怪，但在原始状态下，用户会看到三个输入，并且需要填写至少一个，但不是全部。所以这就是为什么我认为添加 required 不适合我。我需要一些等效的 $("input").val() == "" 应用于 angularjs。谢谢！！