I have a ng-pattern validation for a regex of ^[^\./:*\?\"<>\|]{1}[^\/:*\?\"<>\|]{0,254}$ which basically tests the invalid chars in filepath and teh limit. but when i have the ng-pattern specified as
ng-pattern = "^[^\\\./:\*\?\"<>\|]{1}[^\\/:\*\?\"<>\|]{0,254}$"
, the ng-pattern shows the regex in an incorrect way. any help on achieving this correctly
I have a ng-pattern validation for a regex of ^[^\./:*\?\"<>\|]{1}[^\/:*\?\"<>\|]{0,254}$ which basically tests the invalid chars in filepath and teh limit. but when i have the ng-pattern specified as
ng-pattern = "^[^\\\./:\*\?\"<>\|]{1}[^\\/:\*\?\"<>\|]{0,254}$"
, the ng-pattern shows the regex in an incorrect way. any help on achieving this correctly
Share Improve this question asked Dec 7, 2015 at 19:29 looneytuneslooneytunes 7314 gold badges17 silver badges37 bronze badges 3-
1
In javscript, a regex is wrapped with the / character. Have you tried changing the quotes to backslashes?
/^[^\\\./:\*\?\"<>\|]{1}[^\\/:\*\?\"<>\|]{0,254}$/. – jperezov Commented Dec 7, 2015 at 19:31 - you used unescaped delimiter (/) this is why you got this error. – Shaishab Roy Commented Dec 7, 2015 at 19:35
- @jperezovI tried removing teh quotes at teh ends , it still does not work – looneytunes Commented Dec 7, 2015 at 21:18
3 Answers
Reset to default 3First of all, your regex contains too many escaping symbols, while you only need to escape the " here and \\.
Then, to match a " inside ng-pattern attribute, you may define it as \x22 or ":
var app = angular.module("app", []);<html ng-app="app">
<head>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<form name="form">
<p>Enter text to validate:</p>
<input type="text" ng-model="name" name="name" ng-pattern="/^[^\\\\./:*?"<>|][^\\\\/:*?\x22<>|]{0,254}$/" ng-trim="false" />
<div ng-show="form.name.$error.pattern">Text doesn't match with ng-pattern!</div>
</form>
</body>
</html>You may also solve the problem by defining a regex in the controller with a regular string literal where you may use '.."..' or "..\"...", and then use the variable name inside {{...}} in the ng-pattern attribute. Note that to match a literal \ you need to use 4 backslashes in the regex pattern.
var app = angular.module("app",[]);
app.controller("FormCtrl", function($scope) {
$scope.regex = "/^[^\\\\./:*?\"<>|][^\\\\/:*?\"<>|]{0,254}$/";
});<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<form name="theForm" ng-controller="FormCtrl" novalidate>
<input type="text" name="filename" placholder="filename" ng-model="filename" ng-pattern="{{regex}}" required />
<div class="error"
ng-show="(theForm.filename.$dirty || attempted) && theForm.filename.$invalid">
<small class="error text-danger"
ng-show="theForm.filename.$error.required">
Please enter a file name.
</small>
<small class="error text-danger"
ng-show="theForm.filename.$error.pattern">
Please enter a valid file name.
</small>
</div>
</form>
</div>I was trying to exclude ' and " in a ng-pattern which is similar to the problem above. I found a way to embed ' or " directly without having to use a scope variable:
<input type="text" ng-pattern="/^[^"']+$/" />
You can use \" to escape ".