使用范围数据的角度 ng 模式正则表达式验证

Question

我是 Angular 的新手，所以如果我以错误的方式询问或看待这个问题，请原谅我，但我正在尝试从数据库中的字段动态构建表单。当页面加载时，我从数据库中提取数据并将这些值分配给控制器中的范围。在 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 docs：

• 如果表达式的计算结果为 RegExp 对象，则直接使用它。
• 如果表达式的计算结果为字符串，则在将其包装为^ 和$ 字符后，它将被转换为正则表达式。对于
  例如，"abc" 将转换为新的RegExp('^abc$')。

在您的情况下，正则表达式像字符串一样被解析，所以问题在于字符串"/^\d{11}$/" 内的反斜杠的转义。所以，要修复它，你不能用/包围你的正则表达式，因为它不是一个正则表达式，它是一个带有正则表达式模式的字符串，你也必须转义你的正则表达式模式（如果它不是scaped yet)，就像这样："^\\d{11}$".

此外，您不需要使用{{}}，因为您的正则表达式字符串来自范围内的对象，您可以像这样使用它：ng-pattern="fields.field.regEx"。