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>