如何調試ng-pattern

Question

我正在使用ng-pattern為Angular應用程序定制表單驗證。

在我的表格中，我有：

<form name="jobsForm" id="jobs-form">
    <div jobs-form jobs="jobs">
        <div ng-form="jobsForm">
            <div class="form-group">
                <label for="source_path">Source Path:</label>
                <input type="text" class="form-control" name="source_path" id="source_path" ng-model="jobs.source_path" ng-pattern="path_regex" required>
                <span class="input-error" ng-show="jobsForm.source_path.$invalid.pattern">INVALID PATH</span>
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary-red" ng-click="submitJob()">Submit</button>
</form>

在我的控制器中，我定義path_regex ：

$scope.path_regex = /^[a-zA-Z]:\\(((?![<>:"\/\\|?*]).)+(\\)?)*$/;

當我嘗試時，沒有任何效果。 調試此問題的最佳方法是什么？ 是否可以設置斷點並檢查ng-show值？

Answer 1

當然可以。 如果您查看ng-pattern的angularJS文檔，然后單擊右上方的“ 查看源代碼 ”按鈕，您將看到源代碼。 該指令沒有太多內容。 搜索此代碼：

ctrl.$validators.pattern = function(modelValue, viewValue) {
        // HTML5 pattern constraint validates the input value, so we validate the viewValue
        return ctrl.$isEmpty(viewValue) || isUndefined(regexp) || regexp.test(viewValue);
};

因此，您可以看到在模型控制器上有一個分配給$ validators數組的函數。 數據更改時，將執行所有$ validators。

現在轉到chrome調試器的“ sources”面板，並在未縮小的angular.js文件中搜索這些代碼行之一。 在相同的函數中放置一個斷點，以確保您的正則表達式可以通過測試。