Angularjs 验证：至少需要一个列表中的一个输入
[英]Angularjs Validation: Require at least one input from a list
问题描述
I'm trying to use Angularjs validation to enable a button when at least one input from a list is filled in. What I'm working on is similar to the following w3schools example:
我正在尝试使用 Angularjs 验证来在填充列表中的至少一个输入时启用按钮。我正在处理的内容类似于以下 w3schools 示例：
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid>"
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
I tried adding a div containing two inputs with a "required" tag as follows but to no avail:我尝试添加一个包含两个带有“必需”标签的输入的 div，如下所示，但无济于事：
<div name="address" ng-model="address" required>
<input name="address1" ng-model="address1">
<input name="address2" ng-model="address2">
What would be the best way to do this with angular validation?使用角度验证执行此操作的最佳方法是什么？
5 个解决方案
解决方案1
13 已采纳 2015-04-07 08:28:45
The ng-required directive can help you for your this like conditional requirement needs. ng-required指令可以帮助您满足类似条件需求的需求。
For example:例如：
<div name="addresses">
<input name="address1" ng-model="address1" ng-required="!address2">
<input name="address2" ng-model="address2" ng-required="!address1">
</div>
解决方案2
3 2015-04-07 08:29:52
I'd use ng-required for that case我会在那种情况下使用ng-required
<input ng-required="mustBeFilled()" ng-model="myModel" />
<input ng-required="mustBeFilled()" ng-model="myOtherModel" />
then然后
$scope.mustBeFilled = function () {
if($scope.myModel.length || $scope.otherModel.length){
return false
} else {
return true
}
}
so as soon as one input is filled the inputs won't be required, using require gives you control over some functionalities like using classes from form to display messages因此，一旦填充了一个输入，就不需要输入，使用 require 可以让您控制一些功能，例如使用表单中的类来显示消息
and for submit button you can add对于提交按钮，您可以添加
ng-disabled="formName.$invalid"
解决方案3
0 2015-04-07 08:19:46
要求他们在以下字段之一中输入内容：
ng-disabled="!user && !email"
解决方案4
0 2015-04-07 08:52:11
Try the code below.试试下面的代码。 Working Plunker工作Plunker
<div ng-controller="ExampleController">
<form name="userForm" novalidate >
Name:
<input type="text" name='userName' ng-model="firstName" required />
</form>
<input type = 'button' id="buttonId" value = 'Submit' ng-disabled="!userForm.userName.$dirty"/>
</div>
解决方案5
0 2016-07-19 13:57:42
Here is how I solved it including validation.这是我解决它的方法，包括验证。 Of course ng-pattern optional if needed.如果需要，当然 ng-pattern 可选。 Thank you for this post!感谢您对这篇文章！
var myApp = angular.module('myApp', []); myApp.controller('MainController', ['$scope', function($scope) { $scope.checkSubmit = function() { if ($scope.myform.$valid) { //should also be valid if only one number is available alert('form is valid...'); } } } ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> </head> <body ng-app="myApp"> <div class="container-fluid" ng-controller="MainController"> <form name="myform" ng-submit="checkSubmit()" novalidate> <!-- mobile --> <div class="form-group" ng-class="{'has-error': (myform.$submitted && myform.mobile.$invalid) || (myform.mobile.$invalid && !myform.mobile.$pristine)}"> <label class="col-sm-2 control-label" for="mobile">Mobile: *</label> <div class="col-xs-12"> <input ng-required="!data.home" id="mobile" name="mobile" type="tel" class="form-control" ng-model="data.mobile"> </div> </div> <!-- home --> <div class="form-group" ng-class="{'has-error': (myform.$submitted && myform.home.$invalid) || (myform.home.$invalid && !myform.home.$pristine)}"> <label class="col-sm-2 control-label" for="home">Home: *</label> <div class="col-xs-12"> <input ng-required="!data.mobile" id="home" name="home" type="tel" class="form-control" ng-model="data.home"> <div ng-class="{'has-error': ((myform.$submitted && myform.mobile.$invalid) || (myform.mobile.$invalid && !myform.mobile.$pristine)) || ((myform.$submitted && myform.home.$invalid) || (myform.home.$invalid && !myform.home.$pristine))}"> <span class="help-block">Please enter at least one phone number.</span> </div> </div> </div> <!-- Button (Double) --> <div class="form-group"> <div class="col-xs-12 buttons"> <button id="button" type="submit" name="button" class="btn btn-info">Submit</button> </div> </div> </form> <!-- info --> <div class="row"> <div class="col-xs-12"> <br/>Mobile -> {{myform.mobile.$valid}} - {{myform.mobile.$error}} <br/>Home -> {{myform.mobile.$valid}} - {{myform.mobile.$error}} </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.