ng-pattern not validating second time

I have a multiple page (view) sign up form and on view 3 I have an input with an ng-pattern to evaualte a postal/zip code. The problem is when I switch views and then revisit the view with the ng-pattern the input becomes invalid.

<input type="text" class="form-control" name="postal" ng-model="user.postal" ng-minlength="1" ng-maxlength="8" maxlength="8" ng-pattern="/(^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJKLMNPRSTVWXYZ]( )?\d[ABCEGHJKLMNPRSTVWXYZ]\d$)|(^\d{5}(-\d{4})?$)/gmi" required>

Any ideas on why this becomes invalid?

Solution

Here's a snippet of working code that maintains a valid zip code, and user name, when switching between views. I changed your pattern string to make it work for me, but yours might be fine. I just wanted something simpler to test with. The pattern matches xxxxx | xxxxx-xxxx .

The user object is displayed on each view. The Zip code only shows when it's valid.

If you're using ngView, I found it easiest to nest inside a controller, and remove the controller option from the route configuration. When ngview is updated, it looks like a new controller is instantiated, and you get a new scope. Your previous input would be lost, and well, not be valid :)

var testApp = angular.module("testApp", ['ngRoute']);

testApp.config(['$routeProvider',
  function($routeProvider) {
    //Every View here shares the same controller. ng-view will give you a new controller if you pass it in.
    $routeProvider.when("/view1", {
        //Use TemplateURL instead to reference an extrnal page
        template: '<h2> view 1 </h2><br/>Zip: <input type="text" class="form-control" name="postal" ng-model="user.postal" ng-pattern="/^\\d{5}$|^\\d{5}-\\d{4}$/"  ng-required="!user.postal" /><br/>{{user}}'
          //controller: testCtrl * Maybe this is your issue. *
      })
      .when("/view2", {
        //Use TemplateURL instead to reference an extrnal page
        template: '<h2> view 2 </h2>Name: <input type="text" class="form-control" name="uname" ng-model="user.name" required  />  <br /> {{user}}'
      });
  }
]);

testApp.controller("testCtrl", function($scope, $http) {
  $scope.user = {};

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.js">
</script>
<div ng-app="testApp">
  <div ng-controller="testCtrl">
    <a href="#view1">  View 1 </a>
    <br/>
    <a href="#view2">  View 2 </a>
    <ng-view></ng-view>
  </div>
</div>