How do i use Regular expression in ng-pattern to avoid certain special character?

Question

I have to avoid some some special characters in ng-pattern. I can able to avoid all special characters by using following code

ng-pattern="/^[a-zA-Z0-9]*$/"

But I have to avoid only these charecters

%;:'",<>

How to do write ng-pattern

Update:

<input type="text" class="txt_box" ng-disabled="filechoosen" name="file_name" ng-pattern="/^[^%;:\x27\x22,<>{}[\]\/]*$/" ng-model="filenameedit" id="filenameedit">
<div style="color:Red"  ng-show="file_name.$error.pattern ">These charecters are not allowed</div>

Wiktor Stribiżew · Accepted Answer · 2018-03-21T09:59:46.193

1

You may use

ng-pattern="/^[^%;:\x27\x22,<>{}[\]\/]*$/"

Note that ' is turned to \x27 and " to \x22 to be used freely in an attribute value.

Details

^ - start of string
[^ - start of the negated character class matching any chars other than...
- %;:\x27\x22,<>{}[\]\/ - %, ;, :, ', ", <, >, {, }, [, ] and /
]* - zero or more times
$ - end of string.

See the JS demo:

var app = angular.module("angularApp", [])
.controller("myConfigGenCtrl", function($scope) {
    $scope.subnet = '';
});

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

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="myConfigGenCtrl">
  <div class="ipfield">
   <form  name="frm">
    <label class="plclabel">File Name</label>
    <input type="text" class="txt_box" ng-disabled="filechoosen" name="file_name" ng-pattern="/^[^%;:\x27\x22,<>{}[\]\/]*$/" ng-model="name" id="filenameedit">
    <div style="color:red" ng-show="frm.file_name.$error.pattern">Error: % ; : ' " &lt; &gt; { } [ ] and / are not allowed!</div>
   </form>
  </div>
</body>
</html>

edited Mar 21 '18 at 09:59

answered Mar 21 '18 at 07:47

Wiktor Stribiżew

607,720
39
448
563

var no_spl_char = yourInput.replace(/[%;:'",<>\{\}\[\]\\\/]/gi, ''); I have to do instead of this – Vishnu Mar 21 '18 at 07:48
@Vishnu What do you mean to say? You can't use `.replace()` in the `ng-pattern` attribute. – Wiktor Stribiżew Mar 21 '18 at 07:50
Yes I know that, I have used that code in jquery so i have avoid those characters in ng-pattern – Vishnu Mar 21 '18 at 07:51
@Vishnu So, use the `ng-pattern="/^[^%;:\x27\x22,<>]*$/"` and you won't need to replace those pesky chars ever again :) – Wiktor Stribiżew Mar 21 '18 at 07:55
ng-pattern="/^[^%;:\x27\x22,<>{}[]\/]*$/" is this correct i have added some more charecters – Vishnu Mar 21 '18 at 07:56
1

When adding `]` into the character class in JS regex, you must always escape it. – Wiktor Stribiżew Mar 21 '18 at 07:59
Thank you so much I have edited my code, I have used that pattern , If try to enter that characters am not getting the error message – Vishnu Mar 21 '18 at 08:05
Let me post a JS snippet. It would be better if you also posted a working snippet with your code. – Wiktor Stribiżew Mar 21 '18 at 08:06
https://plnkr.co/edit/T7coSoIuETpKnELPvPtv?p=preview sorry check this one – Vishnu Mar 21 '18 at 08:22
@Vishnu You know, you have a typo in the controller name: `` and `.controller("myConfigGenCtrl", function($scope)`? – Wiktor Stribiżew Mar 21 '18 at 08:38
1

@Vishnu See my updated answer. Note you should put the input into a form and fix some typos like `ng-contoller` to `ng-controller`. – Wiktor Stribiżew Mar 21 '18 at 10:03
Yes after put inside form it works. Thank you so much – Vishnu Mar 21 '18 at 10:39
@WiktorStribiżew, can help me on this? https://stackoverflow.com/questions/70888171/angular-text-box-avoid-only-1-special-character – Panadol Chong Jan 28 '22 at 02:46

How do i use Regular expression in ng-pattern to avoid certain special character?

1 Answers1