Проверка Angularjs для множественного выбора пользовательского интерфейса

СИТУАЦИЯ:

У меня есть угловое приложение, которое отправляет электронные письма. Есть форма с тремя полями: Адрес - Тема - Текст.

Для поля адреса я использую угловой ui-select.

Все работает нормально, за исключением проверки поля адреса (проверка темы и текста работает правильно).

ИЗМЕНИТЬ:

Эта ошибка исправлена ​​с версии 0.16.1. как указал @yishaiz.

Итак, этот вопрос и его относительное решение касаются версий 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 требовал несколько?


javascript validation angularjs select ui-select
person FrancescoMussi    schedule 01.12.2014    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Это работающий планкер.

Строка, которую я изменил, такова:

<form name="emailForm" ng-submit="submitForm(multipleDemo.selectedPeople.length > 0)">

Он не использует форму $valid, что, я думаю, вы хотели бы сделать в идеале.

Я попытался использовать рекомендуемый способ, описанный здесь https://docs.angularjs.org/api/ng/directive/form

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

...

<ui-select multiple required ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;" name=test>

но это не работает.

Интересно, проблема заключается в том, что multipleDemo.selectedPeople всегда действителен, даже если это пустой массив.

Изменить: чтобы проверить более одного поля, вы можете сделать это

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

В контроллере

  $scope.submitForm = function() 
     {
      var valid = true;
      if ($scope.multipleDemo.selectedPeople.length === 0) {
        valid = false;
      }
      // Followed by tests on other fields


      if (valid) {
          alert('valid');
      }
      else {
        alert('not valid')
      }


    };

Плункер

person camden_kid    schedule 01.12.2014
comment
большое спасибо @camden_kid. Это хорошее решение. Что я могу сделать, если мне нужно проверить более одного поля? - person FrancescoMussi; 01.12.2014

arrow_upward
11
arrow_downward

Начиная с 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>
person nicolaspanel    schedule 05.04.2015
comment
Работает как шарм! Спасибо! - person silentser; 18.06.2015
comment
Лучший. Я создал еще один для selectize тоже. Раньше я использовал часы в контроллере. Теперь я могу использовать это в любом представлении, мне не нужен дополнительный код в каждом контроллере. - person Shiju K Babu; 14.07.2015
comment
Отличное решение! Хотя в моем случае мне пришлось установить повышенный приоритет для этой директивы (например, 1000), иначе функция ссылки даже не выполнялась бы. - person nesinervink; 28.09.2015

arrow_upward
1
arrow_downward

Попробуйте это: если длина ng-модели, то есть «хранилище», равна «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>
person Mahantesh Kumbar    schedule 17.12.2015

arrow_upward
1
arrow_downward

Они исправили ошибку в ui-select версии 0.16.1. Посмотрите на этот работающий планкер. Единственное, что я изменил, это версия ui-select здесь.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.js"></script>

И это закрытая ошибка github.

person yishaiz    schedule 06.06.2016
comment
Ok. Спасибо, что дали мне знать. Я включил эту информацию в вопрос. - person FrancescoMussi; 06.06.2016