javascript - 使用范围数据进行 Angular ng-pattern 正则表达式验证

Question

我对 Angular 还很陌生，所以如果我以错误的方式询问或看待这个问题，请原谅我，但我正在尝试从数据库中的字段动态构建表单。当页面加载时，我从数据库中提取数据并将这些值分配给 Controller 中的范围。在 HTML 中，我循环遍历这些范围值以填充页面。在此示例中，fields.field.dataType.type="text"、{{fields.field.isRequired}}="true" 和 {{ fields.field.regEx}}="/^\d{11}$/"。

<div ng-if="fields.field.dataType.type=='text'" class="form-group control-group" ng-class="{true: 'error'}[submitted && fieldsForm.$invalid]">
  <div ng-repeat="fields in selectedPage.fieldValue">
    <ng-form name="fieldsForm>
       /*other code*/
       <div class="controls"
         <input type="{{fields.field.dataType.type}}"
              ng-model="fields.value"
              name="{{fields.field.fieldName}}"
              ng-required="{{fields.field.isRequired}}"
              ng-pattern="{{fields.field.regEx}}" />
       </div>
      <span class="help-label" ng-show="submitted && fieldsForm.$error.pattern">Please enter a valid field</span>
       /*rest of code*/
    </ng-form>
  </div>

输入标记中的其他参数工作正常，但正则表达式字段始终返回无效。我可以用 ng-pattern="/^\d{11}$/" 替换 ng-pattern="{{fields.field.regEx}}" ，验证按预期进行。

我需要做一些不同的事情才能从 {{fields.field.regEx}} 中提取这个正则表达式吗？为什么当我在 ng-pattern 中硬编码 "/^\d{11}$/" 时验证会起作用，但从 {{ 中提取时会失败fields.field.regEx}} 即使它们包含相同的数据？

任何见解将不胜感激，谢谢!

Answer 1

NgPattern 期望它的值是一个 Regex 可解析表达式。

根据angularjs ngPattern文档:

• If the expression evaluates to a RegExp object, then this is used directly.
• If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For
  instance, "abc" will be converted to new RegExp('^abc$').

在您的情况下，正则表达式像字符串一样被解析，因此问题在于字符串 "/^\d{11}$/" 内反斜杠的转义。因此，要修复它，您不能用 / 包围您的正则表达式，因为它不是正则表达式，它是带有正则表达式模式的字符串，并且您也必须转义您的正则表达式模式(如果它尚未被转义)，如下所示:"^\\d{11}$"。

此外，您不需要使用 {{}} 因为您的正则表达式字符串来自作用域上的对象，您可以像这样使用它:ng-pattern="fields.字段.regEx".