Angularjs 如何使用；“必需”；角度指令模板中的属性？

我使用AngularJS指令生成两个单选按钮。我正在将“required”属性硬编码到指令模板中，但它的行为与预期不符

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

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

<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：

---

您需要告诉指令最初验证输入字段。您可以通过定义

$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;
            });
        }
    };
});

app.directive（'dRadio'，function（）{
返回{
要求：“^form”，
限制：'E'，
作用域：{model:'=ngModel'}，
模板：“{label}}”，
链接：函数（范围、元素、属性、ngModelController）{
scope.name=attrs.name；
scope.value=attrs.value；
scope.label=attrs.label；
ngModelController[attrs.name].$formatters.unshift（函数（值）{
ngModelController[attrs.name]。$setValidity（'required'，！！scope.model）；
返回值；
});
}
};
});

请注意，您还需要添加

require:“^form”

规则

---

演示：您可以通过这种方式完成

我改了下面一行

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

错误：性别输入无效

这似乎有效。现在唯一的问题是，如果我先选择“我是女性”，它仍然会说“错误：表格无效”。你知道为什么吗？谢谢。看看更新的演示，我找到了正确的方法。您应该按照组名

attrs.name

处理从ngForm controller检索的输入组的“公共”ngModelController。这非常有效。谢谢一个小细节，我认为ngModelController.gender.$setValidity应该是ngModelController[attrs.name]。$setValidity，对吗？