选择列表上的Aurelia验证

Question

我在Aurelia视图中有一个简单的选择列表，我试图在'Select ...'上设置默认值。我还使用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>

在VM中：

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

页面最初加载后，我在列表中找到我的代理商，我的默认值是正确的，但它显示验证错误消息：

其他表单字段（如文本框）不执行此操作，并且在用户与表单控件交互之前不显示任何错误消息。

我是否需要为选择列表做些特别的事情来隐藏初始加载视图时的验证错误？我怀疑绑定视图中的选择列表会以某种方式触发更改事件。

Answer 1

感谢Gitter上的Aurelia用户，通过将this.agencyId的初始值设置为＆＃34;＆＃34;来解决问题。最初我有this.agencyId = null。那是我的错。因为它是空的而不是＆＃34;＆＃34; （与选择列表中的默认值一样）值不匹配，因此加载视图时选择列表无效。至少，这是我的理解。

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

(abab, zy)

在视图中：

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