Question

我正在尝试让AngularJS重复使用相同类型的输入无线电字段。

示例：

<form>
     <ul id="group1">
         <li><input type='radio' name='optionRadio'></li>
         <li><input type='radio' name='optionRadio'></li>
     </ul>
     <ul id="group2">
         <li><input type='radio' name='optionRadio'></li>
         <li><input type='radio' name='optionRadio'></li>
     </ul>
</form>

AngularJS我有：

<form name='testForm'>
    <ul ng-repeat='field in fields' ng-form='subForm'>
        <li><input type='radio' ng-model='subForm.optionRadio' name='optionRadio'>field.name</li>
    </ul>
</form>

问题是当我点击单选按钮时，它将取消选择另一组中的收音机。

我知道问题是name = optionRadio，但是我试图利用表单testForm中的$ invalid。

如果我删除name ='optionRadio'，我会忽略哪些表单项需要突出显示错误。

我也尝试过单独的表单标签，但是我遇到了ng-repeat和表单标签的麻烦。

我还尝试将 $ index 附加到名称，但表单对象按字面意思接受该值。

非常感谢任何有关如何正确执行此操作的建议。

编辑： http://jsfiddle.net/HB7LU/207/

我做了一个jsfiddle。我找到了一个可行的解决方案，但不会使用表单验证。

通过检查模型是否有值，我可以得到相同的错误消息结果。另一个选择是编写一个自定义指令进行验证，然后检查子表单中我正在寻找的特定错误。

示例：

 <input radioCheck type='radio' name='optionRadio'/>
 <span ng-show='subForm.$error.radioCheck'>Radio check error</span>

Answer 1

您可以在表单控制器上使用$ invalid属性，而不是在模型控制器上使用$ invalid属性。即将<span ng-show="subform.inputRadio.$invalid">Error!!!! missing stuff</span>更改为<span ng-show="subform.$invalid">Error!!!! missing stuff</span>

我遇到了类似的问题，我使用嵌套重复时编写的自定义指令来显示验证类。自定义指令无法使用输入名称，因为它们不能是动态的，因此这不起作用：

<ul validation-class-for="choice">
    <li ng-repeat="choice in question.choices">
        <label>
            <input type="radio" name="choice" value="{{choice.text}}"
                   ng-model="$parent.response.choices" required/>
            {{choice.text}}
        </label>
    </li>
</ul>

使用此自定义指令：

angular.module('ngQuestionnaires.validationClassFor', [])
    .directive('validationClassFor', function () {
        return {
            require: '^form',
            link: function (scope, element, attributes, formController) {
                var hasError = 'has-error',
                    hasSuccess = 'has-success';
                scope.$watch(function () {
                    var controller = formController[attributes.validationClassFor] || formController,
                        state;
                    if (controller.$invalid && controller.$dirty) {
                        state = hasError;
                    } else if (controller.$valid && controller.$dirty) {
                        state = hasSuccess;
                    }
                    return state;
                }, function (newState, oldState) {
                    switch (newState) {
                    case hasError:
                    case hasSuccess:
                        element.removeClass(oldState).addClass(newState);
                        break;
                    default:
                        element.removeClass(hasError).removeClass(hasSuccess);
                        break;
                    }
                });
            }
        };
    });

我通过使用嵌套表单修复了问题，从无线电输入中删除了name属性，并从validation-class-for中删除了值，如下所示：

<ul validation-class-for ng-form="choiceForm">
    <li ng-repeat="choice in question.choices">
        <label>
            <input type="radio" value="{{choice.text}}" 
                   ng-model="$parent.response.choices" required/>
            {{choice.text}}
        </label>
    </li>
</ul>

如果在$ watch函数范围内未定义模型控制器，则自定义指令中链接函数所需的唯一更改是回退到表单控制器，如下所示：

controller = formController[attributes.validationClassFor] || formController

AngularJS重复输入无线电设备

1 个答案: