1

我试图让 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附加到name，但表单对象从字面上接受值。

任何有关如何正确执行此操作的建议将不胜感激。

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

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

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

例子：

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

1 回答 1

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 属性，并从验证类中删除了值，如下所示：

<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
于 2013-10-16T09:12:33.867 回答