1

一般的なフォーム検証インジケーターを作成しようとしています。フォームが有効な場合は、フォームが有効であることを示すメッセージが表示されます。それ以外の場合は、フォームが有効でないことを示すエラーが表示されます。

bookingForm.$validor SOMEFORM.$valid-を使用していますが、機能しng-showません。{{formValid}} と実際のフォームモデルの関係がおかしいと思います。

これが私の指示です：

sharedServices.directive('formValid', function() {
    return {
        restrict: 'A',
        scope: {
            formValid: '@'
        },
        template: '<div class="alert alert-warning" ng-show="!{{formValid}}.$valid"><b>ATH!</b> Útfylling ekki í lagi</div>' +
                    '<div class="alert alert-success" ng-show="{{formValid}}.$valid"><b>OK!</b> Útfylling í lagi</div>',
        link: function(scope, element, attrs) {
            scope.formValid = attrs.formValid;
        }
    };
});

これが私の使用法です：

<div form-valid="bookingForm"></div>
<form name="bookingForm">...</form>

<div form-valid="contactForm"></div>
<form name="contactForm">...</form>

フォーム名(モデル) をディレクティブのテンプレートに渡し、それに応じてフォーム モデルで $valid が true/false であるかどうかを表示したいと考えています。テンプレートをコンパイルする必要がありますか、またはこれを達成するにはどうすればよいですか?

これが機能しないことを示す GIF を次に示しbookingForm.$validます。HTML では正しく、ディレクティブのテンプレートでは常に false です。

http://i.imgur.com/j4g610g.gif

4

1 に答える 1

1

は新しいスコープを作成するためng-show、スコープ内のフォームにアクセスする必要があります$parent。モデルの割り当てに関しては少しトリッキーです。attrs.$observeの値の代わりにオブジェクトを割り当てるために使用できます$valid。

このコードを試してください:

sharedServices.directive('formValid', function () {
    return {
        restrict: 'A',
        scope: {
            formValid: '@'
        },
        template: '<div class="alert alert-warning" ng-show="!formValid.$valid"><b>ATH!</b> Útfylling ekki í lagi</div>' +
            '<div class="alert alert-success" ng-show="formValid.$valid"><b>OK!</b> Útfylling í lagi</div>',
        link: function (scope, element, attrs) {
            attrs.$observe('formValid', function () {
                scope.formValid = scope.$parent[attrs.formValid];
            });
        }
    };
});

DEMO

于 2013-09-15T17:30:10.823 に答える