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”属性下创建并进行数组。当您删除该条目或标记时，它会留下一个空数组，这似乎足以满足要求的检查。

我添加了一个控制器函数来在值数组为空时删除属性：

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

然后我使用ng-change从ui-select元素中调用它，这似乎可行，小提琴是here

AngularJS-UI选择的必填字段验证

1 个答案: