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

AngularJS - Form Custom Validation - Check if at least one input is empty

本文关键字：有一个 输入 是否 表单 自定义 验证 检查 AngularJS      更新时间：2023-09-26

给定一个简单的 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() == "" ) {

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

提前非常感谢，

吉列尔莫

因此，如果所有输入均为空白，则禁用提交按钮。你可以这样做

<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.

演示

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

我的解决方案如下：

        $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禁用按钮

相关文章：