如何调试 ng 模式

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调试器，源面板并在未缩小的角度.js文件中搜索其中一行代码。在同一函数中放置一个断点，以确保您的正则表达式通过测试。