AngularJS错误处理程序不适用于与输入

时间:2016-12-22 13:14:56

标签: javascript jquery html angularjs angular-material

我试图添加一个带有2个字段的单选按钮

全部和数字(这是输入字段)(请参阅附图) 在这个我尝试为输入字段添加错误处理程序。我有数字模式" / ^ [0-9] {1,5} $ /" (从1到5)如果模式不匹配,我想显示错误。

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

现在问题是我不知道为什么我输入错误信息时,我输入的字数或数字超过5位数。可以帮助我犯错的地方。

See this there is no error message displayed (Image)

1 个答案:

答案 0 :(得分:1)

正则表达式的格式略有偏差。当字符串传递给ng-pattern时,它会自动包装在^和$中(请参阅documentation),因此您不需要这些字符。您也不需要在开头和结尾使用正斜杠,但是您需要将正则表达式包装在字符串中。最后,如果您尝试仅匹配数字1到5,则可以将ng-pattern简化为以下内容:

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

但是,如果要匹配1到5之间的任意数字位数,则必须使用以下其中一项:

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

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