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/");
}

Answer 1

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

Answer 2

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.

Answer 3

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）$ /“

Answer 4

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....