Menu
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
333
First 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.com/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.com/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="/^[^"']+$/" />
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
