2

任意の数のテキスト入力を動的に生成するドロップダウンがあり、そのすべてに異なる検証ルール (最小/最大長、パターンなど) があります。他のいくつかのstackoverflowの質問によると。( ng-repeat、ng-show (angular)を使用して動的に作成された入力を検証する方法 ) ng-form モジュールを使用すると、動的検証を使用して動的フォーム要素を作成できます。

私はこれを行いましたが、問題は、ドロップダウンでの選択に基づいてテキスト フィールドの数が変更されたときに、それに応じて検証ルールが更新されないことです。たとえば、最初のドロップダウン オプションは、最小長が 3 のテキスト入力を 1 つ生成します。2 番目のオプションもテキスト入力を 1 つ生成する場合がありますが、最小長は 1 になります。元の選択範囲のテキスト フィールドからの 3 個。

私の質問は、ある種のカスタム ディレクティブを作成せずに角度でこれを行うことは可能ですか? 別の解決策は、ドロップダウン選択ごとに可能なすべてのテキスト要素を前もって出力し、ドロップダウン選択に基づいて ng-show を使用して各セットを表示/非表示にすることです。しかし、私はテンプレートをきれいに保ち、ng-repeat を使用して動的に生成したいと考えています。

最小限の例を設定しました：

var validationApp = angular.module('validationApp', []);

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
    $scope.textChoices = [
        { label: "1 line", validation: [ { minLength: 3 } ] },
        { label: "2 lines", validation: [ { minLength: 1 }, { minLength: 3 } ] },
        { label: "3 lines", validation: [ { minLength: 2 }, { minLength: 2 }, { minLength: 3 } ] }
    ];
    $scope.choice = $scope.textChoices[0];
    $scope.text = [];
}]);

ここで html と完全な例を表示してください: http://jsfiddle.net/anpsince83/kBVR2/

4

2 に答える 2

0

他のスタック オーバーフローの質問で述べたように、現在の AngularJS フォーム検証では不可能です。ただし、ngChange を使用する方法は次のとおりです。

AngularJS:

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
$scope.chkLength = function(i) {
    $scope.minBad[i] = ($scope.text[i].length < $scope.choice.validation[i].minLength);
};
$scope.minBad = {};
}]);

HTML:

        <ng-form name="textForm">
            <label>Enter Text</label>
            <input type="text"
                   name="text"
                   ng-model="text[$index]"
                   ng-change="chkLength($index)">

            Min {{ rules.minLength }} Chars

            <div class="error" ng-show="minBad[$index]">
                <small>Please enter min amount of characters.</small>
            </div>
        </ng-form>

フィドルコード: http://jsfiddle.net/kBVR2/61/

于 2014-01-07T22:51:07.110 に答える