Question

假设我有一个当前有效的ngPattern验证的文本框。我现在将正则表达式更改为与文本框值不匹配的正则表达式。 Angular没有立即发现文本框现在无效 - 用户必须进行更改（例如，键入另一个字母）以导致对新正则表达式进行验证。

解决方法是通过在正则表达式更改时将$ viewValue设置为自身来强制解析管道运行，例如：

查看

<div ng-form="form">
    <input type="text" name="val" ng-model="myValue" ng-pattern="myRegex" />
</div>

控制器

// set a new regex for the ng-pattern directive and force re-validation
$scope.myRegex = new RegExp('^[a-z]$');
$scope.form.val.$setViewValue($scope.form.val.$viewValue); // yuck

然而，这似乎是一个大黑客，我希望有一个更好的方法来做到这一点，而不诉诸自定义指令。

小提琴：http://jsfiddle.net/5jm2V/2/

Answer 1

到目前为止，我通过将$ setViewValue调用移动到一个指令来解决这个明显的限制，这至少遵循控制器不应该关注视图的原则：

// Causes immediate re-validation of the model when ngPattern's regex is changed,
// rather than waiting for the user to manually change the value.
myModule.directive('ngPatternImmediate', [
    function() {
        return {
            require: 'ngModel',
            link: function(scope, elm, attrs, ngModelCtrl) {

                scope.$watch(function() {
                    // watch for change of regex
                    return scope.$eval(attrs.ngPattern);
                }, function() {
                    // force parsing pipeline to run
                    ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
                });
            }
        };
    }
]);

然后可以像这样使用：

<input type="text" ng-model="myValue" ng-pattern="myRegex" ng-pattern-immediate />

如果有更好的方法，我仍然感兴趣。

如何在更改ngPattern使用的正则表达式时立即重新验证

1 个答案: