ng模式第二次未验证

ng-pattern not validating second time

本文关键字：验证 第二次 模式 ng      更新时间：2023-09-26

我有一个多页（视图）注册表单，在视图3中，我有一条带有ng模式的输入，用于导出邮政编码/邮政编码。问题是，当我切换视图，然后使用ng模式重新访问视图时，输入将变为无效。

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

有什么关于为什么这会无效的想法吗？

以下是一段工作代码片段，用于在视图之间切换时维护有效的邮政编码和用户名。我更改了你的模式字符串，使其适用于我，但你的可能还可以。我只是想要一些更简单的东西来测试。该模式与xxxxx|xxxxx-xxxx匹配。

用户对象显示在每个视图上。邮政编码仅在有效时显示。

如果您使用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>

相关文章：