Как отлаживать ng-pattern

Question

Я работаю над проверкой пользовательской формы для приложения Angular, используя ng-pattern,

В моей форме у меня есть:

<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

Конечно, вы можете. Если вы посмотрите документацию angularJS для ng-pattern, а затем нажмете кнопку "Просмотр исходного кода" в правом верхнем углу, вы увидите исходный код. В этой директиве немногое. Искать этот код:

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, панели источников и найдите одну из этих строк кода и в своем неуменьшенном файле angular.js. Поместите точку останова в эту же функцию, чтобы убедиться, что ваше регулярное выражение попадает в тест.