问题:

I'm trying to use Angularjs validation to enable a button when at least one input from a list is filed in. What I'm working on is similar to the following w3schools example:

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

回答1:

The ng-required directive can help you for your this like conditional requirement needs.

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:

I'd use ng-required for that case

<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

and for submit button you can add

ng-disabled="formName.$invalid"

回答3:

ng-disabled="!user && !email"

required them to have entered something into one of the fields.

回答4:

Try the code below. 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:

Here is how I solved it including validation. Of course ng-pattern optional if needed. 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>

转载请标明出处:Angularjs Validation: Require at least one input from a list

文章来源: Angularjs Validation: Require at least one input from a list

标签

require

input

按钮

ng-model

angular

form