2

現在有効な 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/

4

1 に答える 1

4

これまでのところ、$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 />

これを行うためのより良い方法があれば、私はまだ興味があります。

于 2014-06-04T04:38:11.393 に答える