Question

我有一个多页（查看）注册表单，在视图3上我有一个带有ng-pattern的输入，以显示邮政/邮政编码。问题是当我切换视图然后用ng-pattern重新访问视图时输入变为无效。

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

有关为什么会失效的任何想法？

Answer 1

这是一段工作代码，在视图之间切换时维护有效的邮政编码和用户名。我改变了你的模式字符串，使它适合我，但你的可能没问题。我只是想要更简单的测试。模式匹配xxxxx | xxxxx-xxxx。

用户对象显示在每个视图上。 Zip代码仅显示何时有效。

如果您正在使用ngView，我发现在控制器内嵌套最容易，并从路由配置中删除控制器选项。当ngview更新时，它看起来像是一个新的控制器被实例化，并且你获得了一个新的范围。您先前的输入将丢失，并且无效：）

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>

ng-pattern第二次不验证

1 个答案: