Currently I have two directives in the app.js, which are for following onkeypress validation, one directive is to validate only numerics and the other directive validate only letters [A-Z].
<input type="text" id="txt_siaf" class="form-control" ng-model="siaf" maxlength="10" valid-numeric /> Given that my input text currently assigns a valid-numeric directive, I need to know how to change it by the valid-letters directive.
I would appreciate your support.
**You change the value of variable $scope.showNumericDirective dynamically.** Add in template <input type="text" ng-if="showNumericDirective" id="txt_siaf" class="form-control" ng-model="siaf" valid-numeric /> <input type="text" ng-if="!showNumericDirective" id="txt_siaf" class="form-control" ng-model="siaf" valid-letters /> var myapp = angular.module("myapp", []); myapp.controller('controllerName', function($scope) { $scope.showNumericDirective = true; }); myapp.directive('validNumeric', function() { }); myapp.directive('validLetters', function() { }); Well i don't think so that you can add or remove directive dynamically from input but you can play with other work around like:
in controller:
$scope.validNumericDirective = true; and in template:
<input type="text" id="txt_siaf" ng-if="validNumericDirective" class="form-control" ng-model="siaf" maxlength="10" valid-numeric /> <input type="text" id="txt_siaf" ng-if="!validNumericDirective" class="form-control" ng-model="siaf" maxlength="10" valid-letters /> this logic will do the trick but you have to toggle validNumericDirective in your controller on any event.
Update: There is a way where you can add or remove directive dynamically but it has a lengthy process see:
Angularjs dynamically adding and removing elements using directive
https://www.codeproject.com/Tips/1038684/AngularJs-Add-Remove-Directives-Dynamically-Save-D
