ng-patter によるフォームの検証に問題があります。ng-pattern の検証は、別のドロップダウン メニューに依存します。ドロップダウン メニューには、A と B の 2 つの値があります。値ごとに、検証するパターンが異なります。今、私が直面している問題は、値に従ってパターンを呼び出すことができるということですが、パターンに従って正しい情報を入力しても、無効と表示されます。詳細については、以下のコードを参照してください。
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>
ドロップダウンの値を変更すると、パターンが更新されていることがわかりますが、どのような値を挿入しても常に失敗します。考えられる理由と、問題を解決するにはどうすればよいかを確認して提案してください。