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 とフォームタグに問題がありました。

また、 nameに$indexを追加しようとしましたが、フォーム オブジェクトは文字通り値を受け取ります。

これを適切に行う方法についての提案は大歓迎です。

編集: http://jsfiddle.net/HB7LU/207/

私はjsfiddleを作りました。私は解決策を見つけましたが、それは機能しますが、フォーム検証を利用しません。

モデルに値があるかどうかを確認することで、エラー メッセージが表示された場合と同じ結果を得ることができます。もう 1 つのオプションは、検証用のカスタム ディレクティブを記述してから、探している特定のエラーのサブフォームを確認することです。

例：

 <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 属性を削除し、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
于 2013-10-16T09:12:33.867 に答える