ng-pattern not functioning in AngularJS

Question

<label for="updateInterval" class="control-label"  for="UpdateInterval">Select Interval</label>    
<input name="intervalRange" id="intervalRange" ng-pattern="" type="number" class="form-control input-medium fld-updateinterval-val" placeholder=""  ng-model="update_interval" ng-required="true" >

<select class="form-control input-medium sampleForm-combo" onchange="changetextbox(this.value)" id="action" ng-model="update_intervalSelect" ng-required="true">
    <option></option>
    <option value="days">days</option>
    <option value="hours">hours</option>
</select>

Above I have an input box and a dropdown list where the value being inputted in the first text box depends on the value being chosen in at the dropdown list. The JavaScript is reading it well, but my problem is that ng-pattern is not functioning, and I don't know why. If I check it in Firebug, it is being shown that ng-pattern is placed into the textbox, but I'm not sure why I am still able to input numbers that are not within the range I have specified.

function changetextbox(interval)
{
if(interval == "days"){
    $(".fld-updateinterval-val").attr("placeholder", "1-365");
    $(".fld-updateinterval-val").attr("ng-pattern", "/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/");
}

else if (interval == "hours"){
    $(".fld-updateinterval-val").attr("placeholder", "1-8760");
    $(".fld-updateinterval-val").attr("ng-pattern", "/\\b([1-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]|8760)\\b/");
}

Jenish Rabadiya · Accepted Answer · 2015-03-12 02:49:01Z

Just adding ng-pattern as an attribute to input tag or changing it like above wont work. It requires to compile the element by $compile service in order to work properly.

Another simple way of achieving above thing is bind with some scope variable.

angular.module('textInputExample', [])
  .controller('ExampleController', ['$scope',
    function($scope) {
      $scope.example = {
        text: 'guest',
        word: /[a-z]/,
        changengpattern: function() {
          this.word = /[0-9]/;
        }
      };
    }
  ]);

HTML

<form name="myForm" ng-controller="ExampleController">
    Single word:
    <input type="text" name="input" ng-model="example.text" ng-pattern="example.word" required ng-trim="false">
    <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
    <span class="error" ng-show="myForm.input.$error.pattern">
    Single word only!</span>

    <tt>text = {{example.text}}</tt>
    <br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt>
    <br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt>
    <br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt>
    <br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt>
    <br/>
    <input type="button" value="click me to change ng pattern" ng-click="example.changengpattern()" />
  </form>

Here is working fiddle for you

Carnivorus · Accepted Answer · 2015-03-12 12:55:16Z

1

I had the same issues until I found out, that angular needs both starting and string-end tag within your regex. Your examples then would look like:

$(".fld-updateinterval-val").attr("ng-pattern", "/^\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b$/");
$(".fld-updateinterval-val").attr("ng-pattern", "/^\\b([1-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]|8760)\\b$/");

Pay attention to the pattern string starting with /^ and finishing up with $/. This solved my issues with custom ng-patterns.

answered Mar 12, 2015 at 12:55

Carnivorus

767 bronze badges

Comments

Sunil gongle · Accepted Answer · 2017-05-19 10:01:16Z

0

ng-pattern= "/^([0-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]\d|8760)$/"

answered May 19, 2017 at 10:01

Sunil gongle

725 bronze badges

Comments

halfelf · Accepted Answer · 2019-03-22 04:45:58Z

0

provide the regex ("/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/") into the input where inside the ng-pattern.

For example,

ng-pattern="/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/"

It Worked for me....

edited Mar 22, 2019 at 4:45

halfelf

10.2k13 gold badges60 silver badges69 bronze badges

answered Mar 22, 2019 at 4:29

Vicky

4311 gold badge5 silver badges11 bronze badges

Collectives™ on Stack Overflow

ng-pattern not functioning in AngularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related