使用范圍數據進行角度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="{{fields.field.regEx}}"替換為ng-pattern="/^\\d{11}$/" ，並且驗證按預期工作。

從{{fields.field.regEx}}提取這個正則表達式，我有什么不同的東西嗎？ 當我在ng-pattern硬編碼"/^\\d{11}$/"時，為什么驗證會起作用，但是當它從{{fields.field.regEx}}拉出來時失敗，即使它們包含相同的數據？

任何見解都將不勝感激，謝謝！

Answer 1

NgPattern期望它的價值是Regex解析表達式。

根據angularjs ngPattern docs：

• 如果表達式求值為RegExp對象，則直接使用它。
• 如果表達式求值為字符串，則在將其包裝為^和$字符后將轉換為RegExp。 對於
  例如， "abc"將轉換為新的RegExp('^abc$') 。

在你的情況下，正則表達式被解析為一個字符串，所以問題是在字符串"/^\\d{11}$/"內的反斜杠的scaping。 所以，為了修復它，你不能用/包圍你的正則表達式，因為它不是一個正則表達式，它是一個帶有正則表達式模式的字符串，你也必須逃避你的正則表達式模式（如果它還沒有被scaped） ），像這樣： "^\\\\d{11}$" 。

此外，您不需要使用{{}}因為您的正則表達式字符串來自范圍內的對象，您可以像這樣使用它： ng-pattern="fields.field.regEx" 。