使用多步驟形式的angularJS進行驗證
[英]Validation using angularJS in multi step form
問題描述
我有一個多步驟表格
<div ng-init="tab=1">
<form name="mf" novalidate ng-submit="mfCtrl.postForm()" >
<div ng-show="tab===1">
<div class="form-group ">
<label for="exampleInputEmail1">Full Name</label>
<input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
<div class="error" ng-show="mf.name.$invalid && submitted">
<small class="error" ng-show="mf.name.$error.required">
Your name is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=2" >Next</button>
</div>
<div ng-show="tab===2">
<div class="form-group">
<label for="exampleInputEmail1">Mobile</label>
<input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required />
<div class="error" ng-show="submitted && mf.mobile.$invalid">
<small class="error" ng-show="mf.mobile.$error.required">
Your mobile number is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=3" >Next</button>
</div>
<div ng-show="tab===3">
</div>
</form>
</div>
我想在每個步驟中進行驗證，但每個步驟中的按鈕都不是提交按鈕。 我已經嘗試了很多方法，但是沒有任何效果。在單擊按鈕時使用的一種方法中，驗證有效，但同時也會增加選項卡，這是沒有用的。
請提供此問題的解決方案。
注意-我不會禁用我的按鈕，但是在單擊按鈕時顯示錯誤
3 個解決方案
解決方案1
1 2015-12-04 11:52:19
您可能需要這篇文章
我也猜（我不確定它是否會工作，只需嘗試:)，您可以嘗試使用ng-if而不是ng-show：
<form name="mf" novalidate ng-submit="mfCtrl.postForm()" >
<div ng-if="tab===1">
<div class="form-group ">
<label for="exampleInputEmail1">Full Name</label>
<input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
<div class="error" ng-show="mf.name.$invalid && submitted">
<small class="error" ng-show="mf.name.$error.required">
Your name is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=2" >Next</button>
</div>
<div ng-if="tab===2">
<div class="form-group">
<label for="exampleInputEmail1">Mobile</label>
<input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required />
<div class="error" ng-show="submitted && mf.mobile.$invalid">
<small class="error" ng-show="mf.mobile.$error.required">
Your mobile number is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=3" >Next</button>
</div>
<div ng-if="tab===3">
</div>
解決方案2
1 已采納 2015-12-07 05:07:36
終於，我head了頭一天之后，我找到了解決方法。 因此，希望使用AngularJS輕松驗證創建多步驟表單的任何人都可以使用以下代碼：
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cctab= 1;
$scope.submitted = false;
$scope.go = function() {
if ($scope.signup_form.$valid) { // Submit as normal
$scope.cctab=2;
} else {
$scope.signup_form.submitted = true;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{cctab}}
<form name="signup_form" ng-submit="signupForm()" novalidate>
<div ng-show="cctab===1">
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="signup_form.name.$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<input type="button" ng-click="go()" value="next" >
</div>
<div ng-show="cctab===2">
<input type="text" name="username" id="name" placeholder="lname"/>
<input type="button" >
</div>
</form>
</body>
解決方案3
0 2015-12-04 11:43:47
注意：這不是此問題的直接答案，但建議
我從事的項目需要確切的內容，具有驗證功能的多步驟向導，數據保存等。 當開始使用ui-router進行操作時，最終變得非常有問題，然后我找到了一個出色的模塊： 角度多步形式 ，它節省了我很多時間，並且沒有錯誤。 它具有驗證，數據保存等功能。
AngularJS多步驟表單驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.