AngularJS error handler is not working for radio button coupled with input

Question

I'm trying to add a radio button with 2 field

All and number(this is a input field) (pls refer the image attached) in this i'm trying to add a error handler for input field. i have patter for numbers "/^[0-9]{1,5}$/" (from 1 to 5) and if there is a mismatch in pattern i want to display error.

<div id="_work">
   <md-input-container class="md-input-has-value">
      <label>Work is funnnnn</label>
         <md-radio-group layout="row" ng-model="data.group" ng-change='changecolor(data.group)'>
             <md-radio-button value="All Color" class="md-primary"> All </md-radio-button>
             <md-radio-button value="Number" class="md-primary"><LEFT EMPTY></md-radio-button>
         </md-radio-group>
         <md-input-container md-no-float style="float: right; margin: 0px;">
            <input name="num" ng-model="number" placeholder="5" type="text" ng-pattern="/^[0-9]{1,5}$/" class="numberrr" disabled>
            <div ng-messages="num.$error" role="alert">
                <div ng-message="pattern">Looks like it's not a number?</div>
            </div>
         </md-input-container>
   </md-input-container>
</div>

Radio button link (Image)

now the issue is i dont know why i'm not able to get the error msg, when i enter words or numbers more than 5 digits. can any pls help where i'm making mistake.

See this there is no error message displayed (Image)

Answer 1

The format of your regular expression is slightly off. When a string is passed to ng-pattern, it is automatically wrapped in ^ and $ (see the documentation), so you don't need these characters. You also don't need the forward slashes at the beginning and end, but you do need to wrap the regular expression in a string. Finally, if you're trying to match only the numbers 1 through 5, you can simplify your ng-pattern to the following:

ng-pattern="'[1-5]'"

However, if you want to match any number of digits from 1 to 5, you'll have to use one of the following:

// zero or more digits, from 1-5
ng-pattern="'[1-5]*'"

// one or more digits, from 1-5
ng-pattern="'[1-5]+'"