使用 ng-pattern 不适用于控制器或 JSON

Question

我有这个代码，它只接受 6 位数字：

<input
   ng-pattern="{{widget.regex}}" 
   name="{{widget.id}}">
{{widget.regex}}

<span ng-if="(myForm[item.id].$touched === true && myForm[item.id].$valid === false)" class="help-block">
    <div ng-message="pattern">Enter 6 digit ID</div>
</span>

正则表达式值是从 JSON 文件中设置的，如下所示：

{
  "items": [
    {
      "id": "customerID",
      "label": "Enter ID",
      "required": "yes",
      "regex": "/^[0-9]{6,6}$/i"
    },
    {
      "id": "customerEmail",
      "label": "Email",
      "required": "yes"
    }
  ]
},

这是输出：

现在的问题是，如果我在 ID 字段中输入 6 位数字，错误消息不会消失。我输入的任何数字都不会使其起作用。但是，如果我将正则表达式硬编码为 ng-pattern 属性，如下所示：

<input
   ng-pattern="/^[0-9]{6,6}$/i" 
   name="{{widget.id}}">
{{widget.regex}}

<span ng-if="(myForm[item.id].$touched === true && myForm[item.id].$valid === false)" class="help-block">
    <div ng-message="pattern">Enter 6 digit ID</div>
</span>

会成功的！错误消息将消失。我也像这样从控制器测试它：

vm.regex = new RegExp('/^[0-9]{6,6}$/i');

它也不起作用。任何人都知道这是什么问题？请帮助并提前致谢。

Answer 1

RegExp构造函数可以有两种表达方式：

new RegExp('ab+c', 'i');   //string notation
new RegExp(/ab+c/i);   //literal regex notation

注意字符串表示法没有 / 字符，但文字表示法有。

如果包含 / 字符，ng-pattern 会自动将字符串输入转换为文字表示法。如果它检测到没有包含 / 字符的字符串，它会将其包装在 ^ 和 $ 字符中。例如。 "abc" 将转换为 new RegExp('^abc$') 但 "/abc/i" 将计算为 new RegExp(/abc/i).

参考文献：

使用 ng-pattern 不适用于控制器或 JSON

Using ng-pattern does not work from controller or JSON

javascript

angularjs

ng-pattern

angular-controller