1

我正在尝试制作一个通用的表单验证指示器。如果表单有效，则显示表单有效，否则显示错误，表明表单无效。

我正在使用bookingForm.$valid或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 是否为真/假。我需要编译模板还是如何完成这个？

这是一个 GIF，显示它不起作用，bookingForm.$valid在 HTML 中是正确的，但在指令的模板中总是错误的。

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 回答