Question

我正在使用“ui-select”库来自定义下拉列表和xtForm库进行验证。如何使用xtForm 选择验证多选下拉列表？

目前，我正在使用以下代码进行验证：

<ui-select name="emailTo" ng-style='addReport.emailTo.$valid?{"border":"1px solid #ccc"}:{"border":"1px solid red"}' ui-select-required multiple
        data-ng-disabled="isControlDisabled" data-ng-model="currentReport.emailToTemp" theme="bootstrap" data-ng-disabled="disabled" style="width: 100%;min-height:34px">
    <ui-select-match placeholder="Select person...">{{$item.key}}</ui-select-match>
      <ui-select-choices repeat="person.value as person in people | propsFilter: {key: $select.search}">
      <div data-ng-bind-html="person.key | highlight: $select.search"></div>
      <small>
        email: {{person.value}}
      </small>
    </ui-select-choices>
  </ui-select>

但它有两个缺点： 1）当表单第一次加载时，下拉列表的边框为红色。 2）它没有像使用xtForm那样显示其他控件的工具提示。

Answer 1

首先，从ng-style标记中删除ui-select属性。由于ng-style在字段无效时应用了红色边框。

在参考xtform的文档后，我认为您需要将id分配给ui-select元素并在xt-validation-inline中使用它。

<ui-select name="emailTo" id="selectPerson" ui-select-required multiple data-ng-disabled="isControlDisabled" data-ng-model="currentReport.emailToTemp" theme="bootstrap" data-ng-disabled="disabled"
style="width: 100%;min-height:34px">
  <ui-select-match placeholder="Select person...">{{$item.key}}</ui-select-match>
  <ui-select-choices repeat="person.value as person in people | propsFilter: {key: $select.search}">
    <div data-ng-bind-html="person.key | highlight: $select.search"></div>
    <small>
            email: {{person.value}}
          </small>
  </ui-select-choices>
</ui-select>

<xt-validation-inline for="selectPerson"></xt-validation-inline>

此外，如果您只想在表单提交时显示验证消息，可以在表单中添加值submitted

的策略

<form strategy="submitted">
    ...
</form>

这将导致验证消息＆amp;样式仅在表单提交时显示。

使用xtForm对ui-select多选下拉列表进行必要的验证

1 个答案: