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

border should be red when pattern isn't matched. Should use pattern from controller Pattern should allow only characters strings separated by comma. Spaces allowed between strings and commas — Robdll, Jul 06 '17 at 10:51

score 2 · Answer 1 · answered Jul 06 '17 at 09:26

2

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;
}

answered Jul 06 '17 at 09:26

Gustaf Gunér

2,272
4
17
23

i tried to edit the jsfiddle by removing the ng class and adding the style u suggested but still doesn't work, could you try it too? – Robdll Jul 06 '17 at 09:48
1

@Koop4 It's something wrong with your regex, I tried with a basic regex `/[A-Z]/` and it works. http://jsfiddle.net/rcupgp5r/1/ – Gustaf Gunér Jul 06 '17 at 09:58
mmh, the regex seems to work tho, i even tried with ```[a-zA-Z]+( *, *[a-zA-Z]+)*``` What seems to not work is providing the regex using the controller. Can anyone realize what are we doing wrong? – Robdll Jul 06 '17 at 10:31
1

@Koop4 Wrote a new regex for you. Hope it's ok. `/^[A-Za-z]+(\,[A-Za-z]+)*$/` in action: http://jsfiddle.net/rcupgp5r/2/ – Gustaf Gunér Jul 06 '17 at 10:44
with the regex it works, but using it from pattern doesn't, even using the RegExp constructor. Am I missing anything? Edit,, i used the previous regex since your wasn't accepting spaces between strings and comma. here's the correct jsfiddle http://jsfiddle.net/yhqjf6bv/ – Robdll Jul 06 '17 at 11:45
yes, both answer works, i ll approve the previous one since it also use the ng-pattern as required from question! Thank you – Robdll Jul 06 '17 at 12:00

Nilesh Khisadiya · Accepted Answer · 2017-07-06T11:49:13.280

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>

this actually works, but i don't really like the !important in the css style. — Robdll, Jul 06 '17 at 11:44
@Koop4 I have just updated code, as per you said i removed important from the css style. I hope, this is help it. — Nilesh Khisadiya, Jul 06 '17 at 11:50

score -1 · Answer 3 · answered Jul 06 '17 at 09:57

-1

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>

answered Jul 06 '17 at 09:57

Liyaquet Hussain

101
5

i didn't tried it, but i m aiming to have the ng-pattern from scope anyway. I edited my regex since it was wrongly copy pasted before, feel free to edit your snippet. thanks – Robdll Jul 06 '17 at 11:45

How to edit input style by using ng-pattern

3 Answers3