Html AngularJS - 表单自定义验证 - 检查是否至少有一个输入为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18261003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - Form Custom Validation - Check if at least one input is empty
提问by Guillermo
Given a simple html form like this:
给定一个简单的 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>
I need your help to know how to check on validation time, if at least one of the inputs is empty. The desired validation is the following. The user must complete at least one a preference.
如果至少有一个输入为空，我需要您的帮助来了解如何检查验证时间。所需的验证如下。用户必须至少完成一项偏好。
Using jQuery this:
使用jQuery：
if ( $("input").val() == "" ) {
Works ok, but would like to figure out how to do the same thing using angular.
工作正常，但想弄清楚如何使用 angular 做同样的事情。
Thanks so much in advance,
非常感谢提前，
Guillermo
吉列尔莫
回答by zs2020
So the idea is to disable the submit button if all inputs are blank. You can do like this
所以这个想法是如果所有输入都是空白的，则禁用提交按钮。你可以这样做
<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>
!!stris to force to convert strto a booleanvalue. And both !!nulland !!""are evaluated to be false.
!!str是强制转换str为一个boolean值。并且!!null和!!""都被评估为false。
回答by Mouli
You can set the "required" in the input elements and style / code how you want to handle with $valid of a form. Check out http://dailyjs.com/2013/06/06/angularjs-7/
您可以在输入元素和样式/代码中设置“必需”如何处理表单的 $valid 。查看http://dailyjs.com/2013/06/06/angularjs-7/
回答by marksyzm
My solution was the following:
我的解决方案如下：
$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;
};
You apply that method to a data-ng-requiredin each of the inputs...
您将该方法应用于data-ng-required每个输入中的 a ......
<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>
And the last bit I applied was to make the button disabled with a simple myForm.$invalid
我应用的最后一点是用一个简单的按钮禁用按钮 myForm.$invalid
