Как добавить подтверждение для нескольких флажков в Aurelia?

Question

Итак, у меня есть форма, настроенная со списком флажков состояний, так что вы можете выбрать несколько состояний, однако я не совсем уверен, как поставить валидацию в коллекции флажков, а не каждого отдельного ,

Прямо сейчас, у меня есть:

мой-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 для каждые checkbox а не просто их сбор.

Моего 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>