如何在Aurelia中为多个复选框添加验证？

Question

所以我刚刚设置了一个表单，其中列出了状态列表复选框，以便您可以选择多个状态，但是我不太确定如何将验证放在集合<上/ em>的复选框而不是每个复选框。

现在，我有：

我-view.html

    <div repeat.for="territory of availableTerritories" class="form-row">
        <input type="checkbox" value.bind="territory" checked.bind="region.territories & validate">
        <label>${territory}</label>
    </div>

    <ul if.bind="validationController.errors">
        <li repeat.for="error of validationController.errors">
            ${error.message}
        </li>
    </ul>
    <button class="button cancel" click.trigger="cancel()">Cancel</button>
    <button class="button ok" click.trigger="saveRegion()">Save Territories</button>

我-viewmodel.js

availableTerritories = [
'US-AL',
'US-AK',
...
]

region = {
    territories: []
}

constructor(validationController) {
    ValidationRules
        .ensure(region=>region.territories)
            .required()
            .minItems(1)
            .on(this.region);
}

但是，当我使用空输入测试时，我得到每个复选框的ValidationError，而不仅仅是它们的集合。

我的ValidationError消息

  

  
• 地区必须至少包含1个项目。
  
• 地区必须至少包含1个项目。
  
• 地区必须至少包含1个项目。
  
• ...
  

Answer 1

所以我最终在表单上添加了一个隐藏的输入并对其进行了验证，而不是复选框本身：

我-view.html

<div repeat.for="territory of availableTerritories" class="form-row">
    <input type="checkbox" value.bind="territory" checked.bind="region.territories">    // No validation here
    <label>${territory}</label>
</div>

<input type="hidden" value.bind="region.territories & validate">    //Added validation here instead

<ul if.bind="validationController.errors">
    <li repeat.for="error of validationController.errors">
        ${error.message}
    </li>
</ul>
<button class="button cancel" click.trigger="cancel()">Cancel</button>
<button class="button ok" click.trigger="saveRegion()">Save Territories</button>