AngularJS动态ng模式不起作用 [英] AngularJS Dynamic ng-pattern not working
问题描述
我在通过ng-patter验证表单时遇到问题. ng模式验证取决于另一个下拉菜单.在下拉菜单中,我有两个值A和B.对于每个值,我都有不同的模式要验证.现在,我面临的问题是我能够根据值调用模式,但是即使我按照模式输入了正确的信息,仍然显示无效.有关更多详细信息,请找到下面的代码以获取更多详细信息.
I have a issue in validating the form through ng-patter. The ng-pattern validation is depend on the another drop down menu. In the drop down menu, I have two values A and B. For each value, I have different pattern to validate. Now, the problem I am facing is that I am able to called the pattern as per the value but even I put the correct info as per the pattern, still it is showing invalid. For more details please find the below code for more details.
HTML表单
$scope.vendors = [
{
"name":"A"
},
{
"name":"B"
}
];
$scope.setVendorName = function(){
//alert($scope.vendorName.name);
localStorageService.set("vendorName",$scope.vendorName.name);
$scope.vendor = localStorageService.get("vendorName");
$scope.seatPattern = function(audi){
if(audi.name == 'A'){
return "/^[a-fA-F]+[1-6]{1}/";
}else{
return '/^[a-cA-C]+[1-8]{1}/';
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form" name="userForm" novalidate>
<ul>
<!-- <li ng-hide="checkRecentOrder()==false">
<a class="btn btn-primary" href="#">Tract Your Existing Order</a>
</li>-->
<li>
<select name="vendor" ng-model="vendorName" ng-options="vendor.name for vendor in vendors" class="name" required ng-change="setVendorName()">
<option value="">Select Audi</option>
</select>
<span class="error" ng-show="userForm.vendor.$error.required && userForm.vendor.$dirty" style="color:#db3721; font-weight:normal;">
<br />Please select one option
</span>
</li>
<li>
<input name="seat"
class="name"
placeholder="Seat Number "
ng-model="seat_number"
ng-maxlength="2"
ng-minlength="2"
ng-pattern="seatPattern(vendorName)"
required/>
<!--ng-pattern="/^[a-zA-Z]+[0-9]{1}/"-->
<span class="error" ng-show="userForm.seat.$dirty && userForm.seat.$invalid" style="color:#db3721; font-weight:normal;">
<span ng-show="userForm.seat.$error.required">
<br />Please enter your seat number
</span>
<span ng-show="userForm.seat.$error.maxlength || userForm.seat.$error.minlength || userForm.seat.$error.pattern">
<br />
Please enter seat num alpha numeric (A1) </span>
</span>
</li>
</ul>
</form>
当我在下拉列表中更改值时,我可以看到模式已更新,但是无论我插入什么值,它总是会失败.您能否检查一下并提出可能的原因,以及如何解决此问题.
When I change the value in dropdown, I can see the pattern has been updated but whatever value I insert, it always fail. Can you please check and suggest what could be reason and how can I resolve the issue.
推荐答案
做到这一点.摆脱seatPattern
函数.改用范围变量.
Do it like this.Get rid of the seatPattern
function.Use a scope variable instead.
$scope.vendors = [{"name":"A"},{"name":"B"}];
$scope.seatPattern = /^[a-cA-C]+[1-8]{1}/;
$scope.setVendorName = function(){
if($scope.vendorName.name== 'A')
{ $scope.seatPattern = /^[a-fA-F]+[1-6]{1}/; }
else
{ $scope.seatPattern = /^[a-cA-C]+[1-8]{1}/; }
localStorageService.set("vendorName",$scope.vendorName.name);
$scope.vendor = localStorageService.get("vendorName");
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form" name="userForm" novalidate>
<ul>
<!-- <li ng-hide="checkRecentOrder()==false">
<a class="btn btn-primary" href="#">Tract Your Existing Order</a>
</li>-->
<li>
<select name="vendor" ng-model="vendorName" ng-options="vendor.name for vendor in vendors" class="name" required ng-change="setVendorName()">
<option value="">Select Audi</option>
</select>
<span class="error" ng-show="userForm.vendor.$error.required && userForm.vendor.$dirty" style="color:#db3721; font-weight:normal;">
<br />Please select one option
</span>
</li>
<li>
<input name="seat"
class="name"
placeholder="Seat Number "
ng-model="seat_number"
ng-maxlength="2"
ng-minlength="2"
ng-pattern="seatPattern"
required/>
<!--ng-pattern="/^[a-zA-Z]+[0-9]{1}/"-->
<span class="error" ng-show="userForm.seat.$dirty && userForm.seat.$invalid" style="color:#db3721; font-weight:normal;">
<span ng-show="userForm.seat.$error.required">
<br />Please enter your seat number
</span>
<span ng-show="userForm.seat.$error.maxlength || userForm.seat.$error.minlength || userForm.seat.$error.pattern">
<br />
Please enter seat num alpha numeric (A1) </span>
</span>
</li>
</ul>
</form>
这篇关于AngularJS动态ng模式不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!