Генерировать регулярное выражение для нг-шаблона в угловых 1,5

в угловых 1.2 можно было использовать нг-шаблон следующим образом:Генерировать регулярное выражение для нг-шаблона в угловых 1,5

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

Что мне нужно сделать, чтобы исправить это?

[EDIT]

Таким образом, чтобы уточнить, я веб-вызов, который возвращает мне что-то вроде этого:

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

И я хочу, чтобы использовать предоставленные регулярные выражения, на мой взгляд.

Примечание: регулярные выражения создаются на месте и никогда не должны когда-либо использоваться в реальных системах.

источник

2016-07-04 Yuri

Проверьте это!

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 e.g. Angular 1.4.8 и гораздо проще по сравнению с приведенной выше, the same e.g. in plnkr with Angular 1.5.5

UPDATE:

Простой пример использования нг-повтор директивы и ng- формы директивы.

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

    <head> 
    <script data-require="[email protected]" 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: '[email protected]', 
    phone: '9988776655' 
    }, 
    { 
    id: 3, 
    name: 'Robin', 
    email: '[email protected]', 
    phone: 'unknown' 
    } 
    ]; 

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

The plnkr link

источник

2016-07-04 07:37:25

Спасибо за ответ, к сожалению, это не будет работать для моего сценария, потому что он фактически используется в ng-повторе. Таким образом, я не могу просто использовать глобальную переменную. – Yuri

Выполняют ли все элементы в шаблоне ng-repeat один и тот же шаблон проверки с помощью директивы ng-pattern? Если все элементы будут иметь одинаковый шаблон проверки, то использование общей переменной лучше, чем сохранение каждого шаблона в свой собственный элемент модели в массиве. –

Нет, это вещь вещь. – Yuri

Вы можете просто поместить его в атрибут нг-шаблон без создания функции, если переменная регулярное выражение переменной сфера:
<input ng-pattern="{{testRegex}}" name="testInput3" ng-model="testVar3" />

источник

2016-07-04 09:10:11

Это не сработает для меня, регулярное выражение предоставляется бэкэндом. Я получаю список элементов с регулярными выражениями, поэтому мне нужно загрузить их через ngRepeat. – Yuri

Генерировать регулярное выражение для нг-шаблона в угловых 1,5

ответ

Смежные вопросы