javascript - 用于 ui-select 多个的 Angularjs 验证

Question

情况:

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

对于地址字段，我使用的是 Angular ui-select .

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

编辑:

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

所以这个问题和它的相关解决方案是关于 ui-select versions < 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>

Angular :

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

笨蛋:

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

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

问题:

如何使 ui-select 成为必需的多个？

Answer 1

从 angular#1.3 开始，angular 的方法是创建自定义(验证)指令。

指令:

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>

改编自this solution

PS:您也可以使用 ng-messages如果验证失败，则正确显示错误。示例:

<div ng-messages="emailForm.test.$error" >
  <p ng-message="required">Custom message here</p>
</div>