验证单选按钮列表答案

【问题标题】：Validating radio button list验证单选按钮列表
【发布时间】：2013-07-16 16:07:19
【问题描述】：

我有一个指令，它根据其 $valid 值在表单元素上设置 CSS 类。我想将它与单选按钮列表一起使用。集合中有多个单选按钮，但我只需要将指令添加到其中一个，因为 a）它们都控制同一个模型，b）CSS 最终会显示一个图像标签，每个单选按钮列表我只想要一次.

这是一些 HTML：

<div ng-app="myApp">
        <input required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
        <input add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>

脚本：

angular.module('myApp', []).directive('addValidationClass', function() {

    return {
        require: '^ngModel',
        link: function($scope, $element, $attrs, $ngModel) {

            if (!$ngModel) return;

            var update = function () {
                alert($ngModel.$dirty);
                $element
                    .removeClass()
                    .addClass($ngModel.$dirty ? ($ngModel.$valid ? 'valid' : '') : '');
            };

            $scope.$watch($attrs.ngModel, function (newValue, oldValue) {
                update();
            });
        }
    };

});

小提琴：http://jsfiddle.net/JqBgs/

您可以从小提琴中看到，无论单击单选按钮如何，手表都会触发更新。这是我所期望的，因为两个单选按钮控制同一个模型。但是，您也可以看到左侧单选按钮并不脏。所以没有应用 CSS 类。

为什么不脏？

【问题讨论】：

标签： validation angularjs angularjs-directive

【解决方案1】：

我把它放在 HTML 中：

<div ng-app="myApp">
        <input ng-change="myForm.validateRadio.$dirty = true" required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
        <input name="validateRadio" add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>

Angular 中的一个可笑的错误。

【讨论】：