Search code examples
angularjsregexng-pattern

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


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>

Solution

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