javascript - Angularjs - ui-select 的必填字段验证

Question

使用 AngularJs 1.3.4，我尝试验证 ui-select 控件。该控件包含在 ng-repeat 内。下面是我的用户界面选择

 <ui-select tagging tagging-label="new tag" multiple ng-model="data.value" theme="bootstrap" name="value">
              <ui-select-match placeholder="Enter values..">{{$item}}</ui-select-match>
              <ui-select-choices repeat="tags in vm.availableTags | filter:$select.search">
                {{tags}}
              </ui-select-choices>
            </ui-select>

我尝试在下面添加但没有成功

required and ng-required="true" 

阅读了几篇文章后，我添加了如下隐藏输入，其名称与 ui-select 相同:

<input type="hidden" ng-model="data.value" name="value_{{$index}}" class="form-control" required />

上面的代码可以工作，但问题是当您在 ui-select 中键入某些内容然后删除您选择/键入的内容时，它会通过验证并且不会引发错误。理想情况下，它应该返回 isValid 为 false，但它返回 true。

我在这里为我的问题创建了一个演示:http://jsfiddle.net/zfLy86bt/2/

谁能帮我解决这个问题吗？

Answer 1

这是一个有趣的问题，问题是当您最初将数据加载到字段中时，它会在“value”属性下创建数组。当您删除该条目或标签时，它会留下空数组，这似乎足以被视为满足所需的检查。

我添加了一个 Controller 函数，用于在值数组为空时删除该属性:

vm.clearData = function(data) {
    if (data.value && data.value.length == 0) delete data['value'];
}

然后我使用 ng-change 从 ui-select 元素调用它，这似乎有效， fiddle 是 here