2015-04-07 97 views
4

我試圖使用Angularjs驗證來啓用一個按鈕時,至少有一個列表中的輸入提交英寸我正在工作是類似於以下w3schools例如:Angularjs驗證:至少要求從列表中的一個輸入

<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 = '[email protected]'; 
     }); 
    </script> 

</body> 

我嘗試添加含有具有 「必需的」 標記兩個輸入一個div但無濟於事如下:

<div name="address" ng-model="address" required> 
<input name="address1" ng-model="address1"> 
<input name="address2" ng-model="address2"> 

什麼是角度驗證的最佳方法?

+0

我發現了一個類似的問題:http://stackoverflow.com/questions/13466133/how-can-i-conditionally-require-form-inputs-with-angularjs – nerezo

回答

12

ng-required指令可以幫助你像這樣滿足條件需求的需求。

例如:

<div name="addresses"> 
    <input name="address1" ng-model="address1" ng-required="!address2"> 
    <input name="address2" ng-model="address2" ng-required="!address1"> 
</div> 
+0

這確實不適用於所有情況,特別是當複選框選中並取消選中時,模塊不會同時更改 –

0

NG-禁用= 「!用戶& &!電子郵件」

要求他們必須輸入了什麼東西進入的領域之一。

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" 
0

嘗試下面的代碼。 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> 
0

這裏是我如何解決它,包括驗證。當然如果需要,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>

相關問題