如何在Angular指令模板中使用“required”属性？

Question

我使用AngularJS指令生成两个单选按钮。我正在硬编码＆＃34; required＆＃34;属性到指令模板中，但它没有按预期运行。

如果未选中任何单选按钮，则会按预期正确显示此错误消息。

<p ng-show="form.$invalid">Error: the form is invalid.</p>

但它没有显示此错误消息。

<p ng-show="form.gender.$invalid">Error: the gender input is invalid.</p>

知道为什么吗？

详情请见Plunker：

http://plnkr.co/edit/i5kVeX8WdrUbM83lT6O6?p=preview

Answer 1

您需要告诉您的指令最初验证输入字段。您可以通过定义$formatters回调检查字段的有效性来执行此操作：

app.directive('dRadio', function() {
    return {
        require: '^form',
        restrict: 'E',
        scope: { model: '=ngModel' },
        template: '<input required type="radio" id="{{value}}" name="{{name}}" value="{{value}}" ng-model="model"><label for="{{value}}">{{label}}</label>',
        link: function(scope, element, attrs, ngModelController) {
            scope.name = attrs.name;
            scope.value = attrs.value;
            scope.label = attrs.label;

            ngModelController[attrs.name].$formatters.unshift(function(value) {
                ngModelController[attrs.name].$setValidity('required', !!scope.model);
                return value;
            });
        }
    };
});

请注意，您还需要添加require: '^form'规则。

演示：http://plnkr.co/edit/rac1RNNOWHs1wTnktJHE?p=preview

Answer 2

你可以通过这种方式完成 Plnkr

我更改了以下行

<p ng-show="!test">Error: the gender input is invalid.</p>