5

状況：

メールを送信するAngularアプリがあります。アドレス - 件名 - テキストの 3 つのフィールドを持つフォームがあります。

アドレス フィールドには angular ui-selectを使用しています。

アドレス フィールドの検証を除いて、すべて正常に動作しています (件名とテキストの検証は正しく機能しています)。

編集：

このバグは、バージョン 0.16.1 から修正されています。@yshaizが指摘したように。

したがって、この質問とその相対的な解決策は、ui-select バージョン < 0.16.1 に関するものです。


コード：

HTML:

 <form name="emailForm" ng-submit="submitForm(emailForm.$valid)"> 

    <div class="row form-group">

        <label class="col-sm-2 control-label">To: </label>

        <div class="col-sm-10">

            <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

              <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.value}} &gt;</ui-select-match>

              <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search.name, value: $select.search.value, db_data_type_id: 5}">

                  <div ng-bind-html="person2.name | highlight: $select.search"></div>

                    <small>

                        email: <span ng-bind-html="''+person2.value | highlight: $select.search"></span>

                    </small>

              </ui-select-choices>

            </ui-select>

        </div>

    </div>

    <div class="col-sm-8">

         <button type="submit" class="btn btn-primary">Send</button>

    </div>

</form>

角度:

$scope.submitForm = function(isValid) 
 {
    if (isValid) {
        alert('valid');
    }
    else {
        alert('not valid')
    }
};


プランカー:

http://plnkr.co/edit/MYW7SM9c9anH6RTomfRG?p=preview

ご覧のとおり、ui-select が必要ですが、フォームは有効なものとして解析されます。


質問:

どうすれば ui-select 複数を必須にすることができますか?

4

4 に答える 4

11

angular#1.3 以降、これを行うための角度的な方法は、カスタム (検証) ディレクティブを作成することです。

指令：

angular.module('myApp').directive('requireMultiple', function () {
    return {
        require: 'ngModel',
        link: function postLink(scope, element, attrs, ngModel) {
            ngModel.$validators.required = function (value) {
                return angular.isArray(value) && value.length > 0;
            };
        }
    };
});

コードは次のようになります。

<ui-select name="test"
           multiple 
           require-multiple  
           ng-model="database_people.selectedPeople" ...>
  <ui-select-match placeholder="Select person...">...
  </ui-select-match>
  <ui-select-choices ...>
        ...
  </ui-select-choices>
</ui-select>

このソリューションから適応

PS : ng-messagesを使用して、検証が失敗した場合にエラーを適切に表示することもできます。例：

<div ng-messages="emailForm.test.$error" >
  <p ng-message="required">Custom message here</p>
</div>
于 2015-04-05T19:04:12.003 に答える
1

これを試してください: ng-model の長さ、つまり 'storage' が '0' の場合、エラー メッセージを表示します。フォーム form_name.$submitted を使用してエラー メッセージを表示することもできます。これは、複数選択の必須フィールドを処理する簡単な方法です。

<form name="myform" ng-submit="!storage.length>0 && functionname()">
    <div class="form-group">
        <ui-select multiple ng-model="storage" name="weekdays">
            <ui-select-match>
                {{$item.name}}
            </ui-select-match>
            <ui-select-choices>
                {{weekday.name}}
            </ui-select-choices>
        </ui-select>
        <div ng-show="myform.$submitted">
           <div ng-show="!storage.length>0" >
               <span style="color:red;">Storage is required</span>
           </div>
        </div>
    </div>
    <button type="submit">Click</button>  
</form>
于 2015-12-17T11:27:25.130 に答える