Angularjs validation for ui-select multiple

Question

情况：

我有一个发送电子邮件的角度应用程序。有一个包含三个字段的表单：地址 - 主题 - 文本。

对于地址字段，我正在使用角度 ui-select。

一切都工作正常，除了地址字段的验证（主题和文本验证工作正常）。

编辑：

正如@yishaiz所指出的，此错误已从版本 0.16.1 修复。

因此，这个问题及其相对解决方案涉及 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>

ANGULARJS：

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

普朗克：

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

如您所见，ui-select 是必需的，但表单被解析为有效。

问题：

如何使 ui 选择多个必需？

Answer 1

从 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>

Answer 2

这是一个工作的 Plunker。

我更改的行是这样的：

<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')
      }

    };

普伦克

Answer 3

试试这个：如果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>

Answer 4

他们已经修复了 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 关闭的错误问题。