AngularJs Radiobox 组验证答案

【问题标题】：AngularJs Radiobox group ValidationAngularJs Radiobox 组验证
【发布时间】：2014-09-17 09:35:59
【问题描述】：

Angularjs 是否有一种简单的方法来验证已在额外指令中实例化的无线电组？

验证要求：除非单击了其中一个单选框，否则用户无法提交。

这是我的构建方式：

HTML 文档：

<ng-form name="salutationgroup">
      <radiotrigger model="mrms" name="gender" value='1' label="mr" ></radiotrigger>
      <radiotrigger model="mrms" name="gender" value='2' label="ms" ></radiotrigger>
</ng-form>

JS 文档：

Directives.directive('radiotrigger', function() {
    return {
        restrict: 'E',
        scope: {},
        compile: function(element, attrs) {
            var templateText = '<li><label><input type="radio" ng-model="' + 
                    attrs.model + '" value="' + 
                    attrs.value + '">' +
                    attrs.label + '</label></li>';

            element.replaceWith(templateText);
        }
    };
});

非常感谢您的支持。

【问题讨论】：

猜你也错过了传递name 属性，所以只能选择一个值？另一方面，设置 required 属性 - ngForm 将获得 ng-invalid 和 ng-invalid-required css 类，让您知道您的 ngForm 是有效的。
@naeramarth7 虽然这似乎可行，但似乎总是将未选中的单选按钮设置为无效(plunk)

标签： javascript angularjs validation angularjs-directive

【解决方案1】：

一种方法：

HTML

<ng-form name="salutationgroup">
    <radiotrigger model="mrms" name="gender" value='1' label="mr"></radiotrigger>
    <radiotrigger model="mrms" name="gender" value='2' label="ms"></radiotrigger>
    <input type="submit" ng-disabled="!enabled"></input>
</ng-form>

指令（观察 'ng-change="enabled=true"'）：

Directives.directive('radiotrigger', function() {
    return {
    restrict: 'E',
    scope: {},
    compile: function(element, attrs) {
        var templateText = '<li><label><input type="radio" ng-model="' + 
                attrs.model + '" value="' + 
                attrs.value + '" ng-change="enabled=true">' +
                attrs.label + '</label></li>';

        element.replaceWith(templateText);
    }
};

【讨论】：

它对我不起作用。好的，让我们让它变得简单。
先生
ms