ng-pattern 在 AngularJS 中不起作用答案

【问题标题】：ng-pattern not functioning in AngularJSng-pattern 在 AngularJS 中不起作用
【发布时间】：2019-03-22 12:45:58
【问题描述】：

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

上面我有一个输入框和一个下拉列表，其中第一个文本框中输入的值取决于下拉列表中选择的值。 JavaScript 读得很好，但我的问题是 ng-pattern 不起作用，我不知道为什么。如果我在 Firebug 中检查它，则会显示 ng-pattern 已放入文本框中，但我不确定为什么我仍然能够输入不在我指定范围内的数字。

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

【问题讨论】：

标签： javascript html css regex angularjs

【解决方案1】：

只是将ng-pattern 添加为输入标签的属性或像上面那样更改它是行不通的。它需要通过$compile服务编译元素才能正常工作。

实现上述目标的另一种简单方法是绑定一些范围变量。

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 正在为你工作

【讨论】：

效果很好！谢谢！ :)

【解决方案2】：

在我发现之前，我遇到了同样的问题，在你的正则表达式中，角度需要开始和字符串结束标记。您的示例将如下所示：

$(".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$/");

注意以/^ 开头并以$/ 结尾的模式字符串。这解决了我的自定义 ng 模式问题。

【讨论】：

【解决方案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)$/"

【讨论】：

【解决方案4】：

在 ng-pattern 内部的输入中提供正则表达式 ("/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/")。

例如，

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

它对我有用....

【讨论】：