选择列表上的Aurelia验证

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

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

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

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

---

对于选择列表，我是否需要做一些特殊的事情来隐藏初始加载视图时的验证错误？我怀疑在视图中绑定选择列表会触发更改事件

多亏了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> 

机构
**selected=“true”选择。。。
${agency.name}

如何使用typescript？在typescript中，您无法将“this.agencyId:number”设置为“”。在typescript中，在构造函数（如示例所示）或声明中初始化属性，如：

agencyId:number=0
<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>