选择列表上的Aurelia验证

Question

I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.

<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>

In the VM:

constructor(validation) {
    this.agencies = null;
    this.agencyId = 0;
    this.validation = validation.on(this)
        .ensure('agencyId')
          .isNotEmpty();
}
activate() {
    //call api and populate this.agencies 
}

After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:

Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.

Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.

Answer 1

Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.

The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.

constructor() {
    this.agencyId = ""; **//must match the bound property's initial value**
}

And in the view:

<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>