angularjs - ng-messages を使用してチェックボックスセットとラジオセットのエラーメッセージを表示するには?

Question

チェックボックスセットとラジオセットを検証し、ng-messages ディレクティブを使用してエラーメッセージを表示しようとしましたが、期待どおりに動作しません。ng-messages にはエラーメッセージがまったく表示されません。html ファイルを使用してエラーメッセージを入力しています。エラーが解決されるまで、フォームの送信ボタンは無効になります。

次の場合に、チェックボックスセットとラジオセットのエラーメッセージを表示するにはどうすればよいですか。

ラジオセットで 1 つのオプションが選択されていませんか?
チェックボックスセットで少なくとも 1 つのオプションが選択されていませんか?
少なくとも 2 つ以上がチェックされていることを確認できるように、Checkbox セットのチェックをスケーリングしますか?

これが私のフォームです：

<form name="userForm" ng-submit="submitForm()" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && !userForm.subscribe.$touched }">
        <label class="checkbox-inline">
            <input type="checkbox" id="subscribe1" value="option1" name="subscribe[]" ng-model="user.subscribe" required> 1
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="subscribe2" value="option2" name="subscribe[]" ng-model="user.subscribe" required> 2
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="subscribe3" value="option3" name="subscribe[]" ng-model="user.subscribe" required> 3
        </label>

        <div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid">
            <div ng-messages-include="home/messages.html"></div>
        </div>
    </div>

    <div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && !userForm.gender.$touched }">
        <div class="radio">
            <label>
                <input type="radio" name="gender" value="male" ng-model="user.gender" />
                male
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="gender" value="female" ng-model="user.gender" />
                female
            </label>
        </div>

        <div class="help-block" ng-messages="userForm.gender.$error" ng-show="userForm.gender.$invalid">
            <div ng-messages-include="home/messages.html"></div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-success " ng-disabled="userForm.$invalid">Submit</button>
</form>

メッセージ.html

<span ng-message="required">This field is required</span>
<span ng-message="minlength">This field is too short</span>
<span ng-message="maxlength">This field is too long</span>
<span ng-message="required">This field is required</span>
<span ng-message="email">This needs to be a valid email</span>

controller.js

angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngMessages']);

angular
    .module('myApp')
    .controller('HomeCtrl', HomeCtrl);

HomeCtrl.$inject = ['$scope'];

function HomeCtrl($scope) {
    $scope.userForm = {};
}

お支払いチェックボックスセット:

<div class="form-group" ng-class="{ 'has-error' : userForm.payment.$invalid && userForm.payment.$touched }">
    <label class="checkbox-inline">
        <input type="checkbox" id="payment1" value="Visa" name="payment" ng-blur="doTouched()" ng-model="user.payment[1]" ng-required="!someSelected(user.payment)"> Visa
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="payment2" value="Mastercard" name="payment" ng-blur="doTouched()" ng-model="user.payment[2]" ng-required="!someSelected(user.payment)"> Mastercard
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="payment3" value="Cash" name="payment" ng-blur="doTouched()" ng-model="user.payment[3]" ng-required="!someSelected(user.payment)"> Cash
    </label>

    <div class="help-block" ng-messages="userForm.payment.$error" ng-show="userForm.payment.$invalid && userForm.payment.$touched">
        <div ng-messages-include="home/messages.html"></div>
    </div>
</div>

score 6 · Accepted Answer

このサンプルを確認してください:

http://plnkr.co/edit/2w0lIf?p=preview

チェックボックスリストは、少なくとも 1 つの項目が選択されているかどうかをチェックする関数 (コントローラーで定義されている)ng-requiredと共にディレクティブを使用します。someSelected

<div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && userForm.subscribe.$touched }">
    <label class="checkbox-inline">
        <input type="checkbox" id="subscribe1" value="option1" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[1]" ng-required="!someSelected(user.subscribe)"> 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="subscribe2" value="option2" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[2]" ng-required="!someSelected(user.subscribe)"> 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="subscribe3" value="option3" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[3]" ng-required="!someSelected(user.subscribe)"> 3
    </label>

    <div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid && userForm.subscribe.$touched">
        <div ng-messages-include="messages.html"></div>
    </div>
</div>

オプションボタングループはより簡単ng-requiredで、条件付きのディレクティブを使用し!user.genderます。

<div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && userForm.gender.$touched }">
    <div class="radio">
        <label>
            <input type="radio" name="gender" value="male" ng-model="user.gender" ng-required="!user.gender"/>
            male
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="gender" value="female" ng-model="user.gender" ng-required="!user.gender"/>
            female
        </label>
    </div>

    <div class="help-block" ng-messages="userForm.gender.$error" ng-if="userForm.gender.$touched">
        <div ng-messages-include="messages.html"></div>
    </div>
</div>

このngBlurディレクティブは、doTouched() 関数を呼び出して、リスト内のすべての項目がぼやけている場合にのみ、チェックボックスリストが「タッチ」されるという問題を解決します::

  $scope.doTouched = function() {
     $scope.userForm.subscribe.$setTouched();
  }

PS正しい名前に注意してください:userFormはの HTML 名、<form>はuserフォームがバインドされているモデルの名前です。

score 0 · Accepted Answer

これは、私たちの目的に合った私が作成した例です。
私たちのアプリは、ページごとに複数のチェックボックスの質問を作成し、$touched は、すべて同じ name 属性を持つ入力チェックボックスフィールドでは機能しないようです。
また、チェックボックス用に見たカスタム角度プラグイン/ディレクティブは優れていますが (1 つの配列モデルにバインドするだけです)、「必須」をサポートしていないようです。

ここでは、ng-click で設定した質問ごとに custom_touched イベントを設定します。

http://jsfiddle.net/armyofda12mnkeys/9gLndp5y/7/

<li ng-repeat="choice in currentquestion.choices">
                  <input
                    type="checkbox"
                    ng-model="choice.selected"
                    ng-required="!somethingSelectedInTheGroup(currentquestion.required, currentquestion.choices)"
                    ng-click="currentquestion.custom_touched = true;"
                    name="{{currentquestion.question_code}}"
                    id="{{currentquestion.question_code}}_{{choice.option_value}}"                                      
                    value="{{choice.option_value}}"
                  /> {{choice.orig_option_txt}}

              </li> 


$scope.somethingSelectedInTheGroup = function (is_required, choices) {
    if(is_required) {
      for(var i = 0; i < choices.length; i++) {
        var choice = choices [i];
        if(choice.selected) {
            return true;
        }
      }

      return false;
    } else {
        return false;
    }
  }

注：私はもともと使用<div ng-if="questionform.$dirty && questionform[currentquestion2.question_code].$invalid"> していましたが、フォーム/ページごとに複数のチェックボックスの質問ではうまくいきません。

angularjs - ng-messages を使用してチェックボックス セットとラジオ セットのエラー メッセージを表示するには?

2 に答える 2

Related

Reference

angularjs - ng-messages を使用してチェックボックスセットとラジオセットのエラーメッセージを表示するには?