Проверка Aurelia в списке выбора

Question

У меня есть простой список выбора в моем представлении Aurelia, который я пытаюсь установить значение по умолчанию для «Выбрать ...». Я также использую плагин 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

Благодаря виду пользователя Aurelia на Gitter проблема была решена путем установки начального значения this.agencyId на "". Первоначально у меня был this.agencyId = null. Это была моя ошибка. Поскольку он был нулевым, а не «" (как и значение по умолчанию в списке выбора), значения не совпадали, поэтому список выбора был недопустимым при загрузке представления. По крайней мере, это мое понимание.

Урок заключается в том, что если вы хотите проверить список выбора, убедитесь, что свойство виртуальной машины инициализировано с тем же значением, что и значение по умолчанию вашего списка избранного.

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>