在Angular 1.5中为ng-pattern生成正则表达式

Question

在Angular 1.2中，可以使用如下的ng-pattern：

<input ng-model="myModelVar" ng-pattern="myModelRegex" />

其中myModelRegex可能是这样的： /^[a]+$/i对数字的不区分大小写匹配a的。 从AngularJS 1.5开始，行为发生了变化（如文档所示：见此处）。

我想要实现的是：

  $scope.testRegex = '^[a]+$';

  $scope.generateRegex = function(modelVar) {
    return new RegExp(modelVar, 'i');
  }

有：

  <input ng-pattern="generateRegex(testRegex)" name="testInput3" ng-model="testVar3" />

所以，我的正则表达式实际上是一个模型变量，由外部源提供。 人们可以改变它并不重要，后端也会对此进行过滤。

上面的示例“有效”，但会引发infDigest错误。 看我的jsFiddle： https ：//jsfiddle.net/t0nfurjb/

我需要做些什么来解决这个问题？

[编辑]

所以，为了澄清，我做了一个网络电话，它返回给我这样的东西：

[
{
 caption: "Please enter your mail address";
 regex: [a-z]+@[a-z]+.[a-z]+
},
{
 caption: "Please enter your phone number";
 regex: [0-9]{10}
}
]

我想在我的视图中使用提供的正则表达式。

注意：正则表达式是在现场组成的，绝不应该在实际系统中使用。

Answer 1

看一下这个！

 angular .module('demoApp', []) .controller('MainController', MainController) function MainController($scope) { var modelVariable; $scope.testVar = 'bb'; getRegex(); $scope.regex = new RegExp(modelVariable, 'i'); function getRegex() { // get regex via data source and set it on local variable. modelVariable = '^[b]+$'; } }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demoApp" ng-controller="MainController"> <form name="testForm"> <!-- What I want: --> <input ng-pattern="regex" name="testInput" ng-model="testVar" /> <input type="submit" /> <pre> input: {{testVar}} $error: {{testForm.testInput.$error}} </pre> <br /> </form> <pre> </pre> </div>

这也适用于jsfiddle，例如Angular 1.4.8，并且与上面的相比更简单，例如在与Angular 1.5.5的plnkr中相同

更新：

使用ng-repeat指令和ng-form指令的简单示例。

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
    .margin-bottom {
      margin-bottom: 2%;
    }
    </style>
  </head>

  <body ng-controller="DefaultController as ctrl">
    <form role="form" name="heroForm" novalidate="novalidate">
      <div class="margin-bottom" ng-repeat="hero in ctrl.heroes">
        <ng-form name="heroFieldForm">
          <label>{{hero.name}}</label>
          <div>
            <label>Email:</label>
            <input type="email" name="email" ng-model="hero.email" ng-required="true" ng-pattern="ctrl.getRegex('email')"/>
            <span ng-show="heroFieldForm.email.$invalid">Valid Email Required</span>
          </div>
          <div>
            <label>Phone:</label>
            <input type="tel" name="phone" ng-model="hero.phone" ng-required="true" ng-pattern="ctrl.getRegex('phone')"/>
            <span ng-show="heroFieldForm.phone.$invalid">Valid Phone Required</span>
          </div>
        </ng-form>
      </div>
    </form>
  </body>

</html>

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.heroes = heroes;
  vm.regexes = regexes;
  vm.getRegex = getRegex;

  function getRegex(type) {
    if (type === 'email') {
      return vm.regexes[0].regex;
    } else {
      return vm.regexes[1].regex;
    }
  }
}

var heroes = [
  {
    id: 1,
    name: 'Batman',
    email: 'unknown',
    phone: 'unknown'
  },
  {
    id: 2,
    name: 'Alfred Pennyworth',
    email: 'alfred@waynemanor.com',
    phone: '9988776655'
  },
  {
    id: 3,
    name: 'Robin',
    email: 'robin@wayneinc.com',
    phone: 'unknown'
  }
  ];

var regexes = [
  {
    caption: "Please enter your mail address",
    regex: '^[a-z]+@[a-z]+.[a-z]+$'
  },
  {
    caption: "Please enter your phone number",
    regex: '^[0-9]{10}$'
  }
  ];

plnkr链接

Answer 2

如果你的正则表达式变量是范围变量，你可以简单地将它放入ng-pattern属性而不创建函数：
<input ng-pattern="{{testRegex}}" name="testInput3" ng-model="testVar3" />

在Angular 1.5中为ng-pattern生成正则表达式

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-07-04 07:37:25

解决方案2
0 2016-07-04 09:10:11

在Angular 1.5中为ng-pattern生成正则表达式

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-07-04 07:37:25

解决方案2 0 2016-07-04 09:10:11

解决方案1
0 已采纳 2016-07-04 07:37:25

解决方案2
0 2016-07-04 09:10:11