Проверка 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>

В ВМ:

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. Это была моя ошибка. Поскольку он был нулевым, а не "" (как было значением по умолчанию в списке выбора), значения не совпадали, поэтому список выбора был недействительным при загрузке представления. По крайней мере, это мое понимание.

Урок заключается в том, что если вы хотите проверить список выбора, убедитесь, что ваше свойство 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>