AngularJS error handler not working for link switch

Question

I am trying to add a switch with 2 fields

Everything and number (this is an input field) (pls refers to the attached image) in this I am trying to add an error handler for the input field. I have a patter for the numbers "/ ^ [0-9] {1,5} $ /" (1 to 5), and if there is a mismatch in the pattern, I want to display an 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 not a number?</div> </div> </md-input-container> </md-input-container> </div> 

Radio Link (Image)

now the problem is that I don’t know why I cannot get the msg error message when I enter words or numbers more than 5 digits. can any pls help where i am making a mistake.

See that the error message is not displayed (image)

Answer 1

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

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

However, if you want to match any number of digits from 1 to 5, you will need to use one of the following values:

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