选择列表上的 Aurelia 验证

Question

我的 Aurelia View 中有一个简单的选择列表，我正在尝试将默认值设置为“选择...”。我还使用 aurelia-validation 插件来确保在提交表单之前更改值。该插件适用于我项目中的其他字段类型。

<div class="form-group">
                <label for="agencies" class="control-label">Agency</label>
                <select value.bind="agencyId" class="form-control">
                  <option value="">Select..</option>
                  <option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
                </select>
              </div>

在虚拟机中:

constructor(validation) {
    this.agencies = null;
    this.agencyId = 0;
    this.validation = validation.on(this)
        .ensure('agencyId')
          .isNotEmpty();
}
activate() {
    //call api and populate this.agencies 
}

页面最初加载后，我在列表中获得了我的代理机构，并且我的默认值是正确的，但它显示了验证错误消息:


在用户与表单控件交互之前，其他表单字段(如文本框)不会这样做并且不会显示错误消息。

我需要为选择列表做些什么来隐藏 View 初始加载时的验证错误吗？ 我怀疑在 View 中绑定(bind)选择列表会以某种方式触发更改事件。

Answer 1

感谢 Gitter 上的 Aurelia 用户，通过将 this.agencyId 的初始值设置为“”解决了这个问题。最初我有this.agencyId = null。那是我的错误。因为它是 null 而不是“”(选择列表中的默认值)，所以值不匹配，因此在加载 View 时选择列表无效。至少，这是我的理解。

教训是，如果要验证选择列表，请确保将 VM 属性初始化为与选择列表的默认值相同的值。

constructor() {
    this.agencyId = ""; **//must match the bound property's initial value**
}

在 View 中:

<div class="form-group">
  <label for="agencies" class="control-label">Agency</label>
    <select value.bind="agencyId" class="form-control">
     <option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
      <option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
    </select>
</div>