如何在 Angular 指令模板中使用“必需”属性？答案

【问题标题】：How to use "required" attribute within Angular directive template?如何在 Angular 指令模板中使用“必需”属性？
【发布时间】：2014-09-07 19:28:57
【问题描述】：

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

当没有选中单选按钮时，它会按预期正确显示此错误消息。

<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

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案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

【讨论】：

这似乎行得通。现在唯一的问题是，如果我先选择“我是女性”，它仍然会显示“错误：表单无效”。知道为什么吗？谢谢。
看看更新的演示，我找到了正确的方法。您应该处理从 ngForm 控制器检索的输入组的“通用”ngModelController，按组名attrs.name。
效果很好。谢谢！一个小细节，我觉得 ngModelController.gender.$setValidity 应该是 ngModelController[attrs.name].$setValidity 吧？

【解决方案2】：

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

我更改了以下行

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

【讨论】：