选择列表上的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的初始值设置为""来解决问题.最初我有this.agencyId = null.那是我的错.因为它为null而不是""(因为是选择列表中的默认值),所以值不匹配,因此加载视图时选择列表无效.至少,这是我的理解.

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

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

在视图中:

<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>