使用xtForm对用户界面选择多选下拉列表进行必要验证

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

首先，从ui-select标记中删除ng-style属性。由于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>

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