Angularjs验证：需要列表中的至少一个输入
Posted
技术标签:
【中文标题】Angularjs验证：需要列表中的至少一个输入【英文标题】：Angularjs Validation: Require at least one input from a list 【发布时间】：2015-06-11 18:32:32 【问题描述】：我正在尝试使用 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>
我尝试添加一个 div，其中包含两个带有“必需”标签的输入，如下所示，但无济于事：
<div name="address" ng-model="address" required>
<input name="address1" ng-model="address1">
<input name="address2" ng-model="address2">
使用角度验证执行此操作的最佳方法是什么？
【问题讨论】：
我发现了一个类似的问题：***.com/questions/13466133/… 【参考方案1】：要求他们在以下任一字段中输入内容：
ng-disabled="!user && !email"
【讨论】：
【参考方案2】：ng-required 指令可以帮助您满足类似的条件需求需求。
例如：
<div name="addresses">
<input name="address1" ng-model="address1" ng-required="!address2">
<input name="address2" ng-model="address2" ng-required="!address1">
</div>
【讨论】：
这不适用于所有情况，特别是当复选框选中和取消选中时，模块不会同时更改【参考方案3】：在这种情况下我会使用ng-required
<input ng-required="mustBeFilled()" ng-model="myModel" />
<input ng-required="mustBeFilled()" ng-model="myOtherModel" />
然后
$scope.mustBeFilled = function ()
if($scope.myModel.length || $scope.otherModel.length)
return false
else
return true
所以只要一个输入被填满，就不需要输入，使用 require 可以让您控制一些功能，例如使用表单中的类来显示消息
对于提交按钮，您可以添加
ng-disabled="formName.$invalid"
【讨论】：
【参考方案4】：试试下面的代码。 Working 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】：这是我解决它的方法，包括验证。当然，如果需要，ng-pattern 是可选的。感谢您的这篇文章！
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>【讨论】：
以上是关于Angularjs验证：需要列表中的至少一个输入的主要内容，如果未能解决你的问题，请参考以下文章