使用angularjs進行表單驗證

我想以角度方式對錶單進行驗證。我有三個輸入框。當輸入其中一個時，所有三個都是必需的。否則，他們不是必需的。只有在輸入了三個或不輸入時，才能啓用繼續按鈕。使用angularjs進行表單驗證

您可以查看this plunker上的代碼。這裏有一個片段，也以防萬一plunker不便：

angular.module('test', []).config(function() {}); 
 

 
angular.module('test').controller('testctrl', function($rootScope, $scope, $location) { 
 
    $scope.admin = [{ 
 
    "number": "2" 
 
    }]; 
 
    $scope.adminInfos = {}; 
 
    $scope.validations = {}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form name="test_form"> 
 
    <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" /> 
 
    <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span> 
 
    <br/> 
 
    <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].email.length" /> 
 
    <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].firstname.length) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span> 
 
    <br/> 
 
    <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].lastname.length" /> 
 
    <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span> 
 

 
    <br/> 
 
    <br/> 
 

 
    <button ng-disabled="test_form.$invalid">Continue</button> 
 

 
</form>

我有一個問題，即繼續，如果我輸入名字按鈕仍處於啓用狀態，並留下了姓名和電子郵件作爲空白。

如果不輸入全部三個或全部輸入三個，則必須啓用繼續按鈕。

來源

2015-09-23 user4925190

你ng-required條件是錯誤的，改變你的NG-要求的條件使用或（||），而不是&所有領域

ng-required="adminInfos[admin.number].lastname.length || adminInfos[admin.number].email.length"

檢查這個plunker，它的工作原理..

來源

2015-09-23 14:57:34 ssilas777

哦..那真是個愚蠢的錯誤。不管怎麼說，多謝拉！！ – user4925190

您不需要執行ng-required，只需將其替換爲「必需」即可，以表明爲使表單有效而需要。請看下圖：

<!DOCTYPE html> 
<html ng-app="test"> 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller="testctrl"> 
    <form name="test_form"> 
    <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" required /> 
    <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span> 
    <br/> 
    <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" required /> 
    <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].firstname.length) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span> 
    <br/> 
    <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" required /> 
    <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span> 

    <br/> 
    <br/> 

    <button ng-disabled="test_form.$invalid">Continue</button> 

    </form> 
</body> 

</html>

來源

2015-09-23 14:53:24 cullimorer

它只有當領域之一是需要和要求其他兩個。它可以以任何順序。否則你可以繼續下去。 – user4925190

我是否正確理解，當沒有或全部三個輸入時，應該啓用繼續按鈕？如果不是，我不確定我是否完全理解這些要求。 – cullimorer

只有在任何其他文件中有值時才需要字段，否則不需要。 – ssilas777

你有一個邏輯缺陷。 ng-required應該是或（||）不是和（& &）。見下面的叉子。

Plunkr

<input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />

作爲一個說明，請把這個複雜的UI邏輯的方法中的控制器上:)

來源

2015-09-23 14:59:58

使用angularjs進行表單驗證

回答

相關問題