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

Question

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

13

假设有一个简单的 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完成相同操作的方法。

非常感谢您的提前帮助，

Guillermo

- Guillermo

3个回答

4

我的解决方案如下：

        $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使按钮变为禁用状态。

- marksyzm

1

太好了！我修改了它，这样你就可以传入你要测试的模型，而不是把一个数组传入forEach。唯一的问题是针对复选框进行测试时，如果未选中，则返回“N”，但在if语句中检查它真的很容易。谢谢！ - Yeysides

4

您可以在输入元素中设置“required”，并可以自定义样式/代码来处理表单的$valid。请参阅http://dailyjs.com/2013/06/06/angularjs-7/

- Mouli

Mouli，感谢您的回答。我知道这很奇怪，但在原始状态下，用户将看到三个输入框，并需要填写至少一个，但不是全部。因此，我认为添加“required”并不适合我。我需要一些类似于$("input").val() == ""应用于angularjs的等效方法。谢谢！ - Guillermo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zs2020 · Accepted Answer

所以这个想法是，如果所有输入都是空白的，则禁用提交按钮。你可以像这样操作：

<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 强制转换为布尔值的方式。而且，!!null 和 !!"" 都被求值为 false。

演示