AngularJS Dynamic ng-pattern not working

Question

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 form

$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.

John · Accepted Answer · 2015-05-26 18:58:25Z

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>

I tried with by using scope variable and its working as expected. Thanks

user902383 · Accepted Answer · 2015-05-27 08:42:23Z

1

Problem is in your seatPattern function.

You are returning string, not a regular expression. Drop quotes, and it will work fine.

$scope.seatPattern = function(audi){
     if(audi.name == 'A'){
           return /^[a-fA-F]+[1-6]{1}/;
      }else{
           return /^[a-cA-C]+[1-8]{1}/;
      }
}

answered May 27, 2015 at 8:42

user902383

8,6508 gold badges47 silver badges66 bronze badges

1 Comment

Robindra Singha Over a year ago

Hi, I tried removing the quotes, but it does not work get the below error 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle. Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive. As per the error code, when I try to check the issue, without the quote, the seatPattern function keep executing infinite times but not sure why.

Collectives™ on Stack Overflow

AngularJS Dynamic ng-pattern not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related