All geek questions in one place

By setting up a directive to restrict user input of special characters: angular Js

I understand the angularJs directive in detail. I am currently using it to prevent the user from entering special characters.

here is the code

HTML

<input type="text" no-special-char ng-model="vm.customTag" class="form-control" value="" />

AngularJS Directive

 app.directive('noSpecialChar', function () { return { require: 'ngModel', restrict: 'A', link: function (scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { if (inputValue == null) return '' cleanInputValue = inputValue.replace(/[^\w\s]/gi, ''); if (cleanInputValue != inputValue) { modelCtrl.$setViewValue(cleanInputValue); modelCtrl.$render(); } return cleanInputValue; }); } } });

here are two things i want

(1) the user can enter a minus / dash '-' , which is not happening right now, how can I change my /[^\w\s]/gi , which allows the user to enter a sign (depression / minus sign).

(2) The above functionality restricts the user from entering any special character, but when the user enters a special character, I want to display a red warning and special characters are not allowed , how can I do this?

Any help is appreciated !!!

thanks

+5
source share
2 answers

Question number 1

Your RegEx currently selects all characters that are not ( [^ ) the word character ( \w ) or space ( \s ). To include - , it must be included in the list of characters that cannot be replaced.

Try the following RegEx:

 /[^\w\s-]/gi

To prevent any other characters from being deleted, simply add them after -

Live Demo on RegExr

Question number 2

You need to listen to the keypress event on the form to see it every time the content changes. Then you can use .match() to see if any special characters exist. If they do, it will return a string that is truthy if it does not return false .

You can check the result of .match() in the if , and if the corresponding character is matched, add your message.

 if (inputValue.match(/[^\w\s]/gi)) { // Add Alert Here! }

Also, inside your if (cleanInputValue != inputValue) you can add code to generate an alert. Your if basically gives you the same result as the .match() method. It determines if the line has been changed .replace() , and runs the code inside if it has

0
source

Edited further:

This does what you describe, not especially "Angular", but achieves your described desired result.

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="ns.test"> <head> <title>Test</title> <!-- http://stackoverflow.com/questions/36303590/customizing-directive-to-restrict-the-user-to-input-special-characters-angular --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <style> .input { padding: 20px; margin: 50px; } .input input { border: solid 1px black; font-family: Tahoma; font-size: larger; padding: 5px; } .err { color: red; padding: 5px; margin: 10px; font-family: Tahoma; font-size: larger; display:inline; } </style> <script type="text/javascript"> var app = angular.module('ns.test', []); app.controller('testController', function ($scope) { $scope.item = 'item1'; $scope.item2 = 'item2'; $scope.item3 = 'item3'; $('input:first').focus(); }); var noSpecialChar = function () { return { restrict: 'A', require: '?ngModel', link: function (scope, elm, attr, modelCtrl) { if (!modelCtrl) return; modelCtrl.$parsers.push(function (inputValue) { if (inputValue == null) return '' var parent = $(elm).parent(); cleanInputValue = inputValue.replace(/[^a-z0-9-_]+/gi, ''); if (cleanInputValue != inputValue) { if (parent.find(".err").length == 0) parent.append("<div class=\"err\">Invalid Characters</div>"); // change the class here to your bootstrap alert classes } else parent.find(".err").remove(); return cleanInputValue; }); } }; }; app.directive('noSpecialChar', noSpecialChar); </script> </head> <body data-ng-controller="testController"> <form name="userForm" novalidate> <div class="input"> <input type="text" data-no-special-char data-ng-model="item" /> </div> <div class="input"> <input type="text" data-no-special-char data-ng-model="item2" /> </div> <div class="input"> <input type="text" data-no-special-char data-ng-model="item3" /> </div> </form> </body> </html>
0
source

Source: https://habr.com/ru/post/1246053/

More articles:


All Articles