How to edit input style by using ng-pattern
Question
I made a small js here
I also add the code to the Stack overflow snippet but for some reason it doesn't work to me
var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.my_model = '' $scope.my_regex = '/^[A-Za-z]+(\\,[A-Za-z]+)*$/'; $scope.my_placeHolder = 'write something'; }
.invalid input[name=my_input]{ border: 2px solid red; } input[name=my_input] { border: 2px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="MyCtrl"> <form name="contentForm"> <input type="text" name="my_input" ng-class="{ 'invalid': contentForm['my_input'].$invalid }" ng-model="my_model" ng-pattern="{{my_regex}}" placeholder="{{my_placeHolder}}"> </form> </div>
I tried to use the code snippet but weren't working >,<
So, my goal is to edit the input border (let's make it red for purpose) if the input text doesn't pass the regex rule.
The regex should accept any comma separated string.
I tried a bunch of stuff, but I can't figure out what am i doing wrong.
UPDATE: REGEX EDITED
3 answers
solution1
1 2017-07-06 09:26:40
If ng-pattern fails, which means the regex is not fulfilled, a class ng-invalid-pattern is added to the <input> element. This means that you should be able to add the the red border to an input field that isn't passing the ng-pattern with the following CSS:
input[name=my_input].ng-invalid-pattern{
border: 2px solid red;
}
solution2
1 ACCPTED 2017-07-06 10:16:19
In your code snippet, ( )*,( )*[a-zA-Z]+)* regex is not valid. you can test your regex here or other online tool. Here i tried with simple numeric regex and it is working fine.
function formCtrl($scope){ $scope.my_model = 'test,dfsdf,dfs' $scope.my_placeHolder = 'write something'; $scope.my_pattern="/^[A-Za-z]+(\\,[A-Za-z]+)*$/";// here you replace your regex which you want }
.invalid{ border: 2px solid red; } .valid { border: 2px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html> <div ng-app ng-controller="formCtrl"> <form name="myForm" > <input type="text" ng-model="my_model" name="my_input" ng-pattern=" {{my_pattern}}" ng-class="{'invalid': myForm.my_input.$error.pattern, 'valid': !myForm.my_input.$error.pattern }" placeholder="{{my_placeHolder}}" /> <span ng-show="myForm.my_input.$error.pattern">Not a valid input!</span> </form> </div> </html>
solution3
-1 2017-07-06 09:57:13
Try with This
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="MyCtrl"> <form name="contentForm"> <input type="text" name="my_input" ng-class="{'invalid': contentForm['my_input'].$error.pattern }" ng-model="my_model" ng-pattern="'( )*,( )*[a-zA-Z]+)*'" placeholder="{{my_placeHolder}}"> </form> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.