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

2009年，由于一个的Gitter一种奥里利亚用户，这个问题是通过设置this.agencyId以“初始值”来解决。最初我有this.agencyId = 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>