[英]Generate regular expression for ng-pattern in Angular 1.5
在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}
}
]
我想在我的視圖中使用提供的正則表達式。
注意:正則表達式是在現場組成的,絕不應該在實際系統中使用。
看一下這個!
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}$'
}
];
如果你的正則表達式變量是范圍變量,你可以簡單地將它放入ng-pattern屬性而不創建函數:
<input ng-pattern="{{testRegex}}" name="testInput3" ng-model="testVar3" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.