Question

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

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

其中myModelRegex可能类似于：/^[a]+$/i，用于对多个a的不区分大小写的匹配。从AngularJS 1.5开始，行为发生了变化（如文档中所示：see here）。

我想要达到的目标是：

  $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

看看这个！

＆＃13;

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]+$';
  }
}

＆＃13;

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

＆＃13;

这也适用jsfiddle e.g. Angular 1.4.8，与上面的the same e.g. in plnkr with Angular 1.5.5

相比更简单

更新：

使用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}$'
  }
  ];

The plnkr link

Answer 2

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

在Angular 1.5

2 个答案: