Validation on select inputs

vNext
1

I have something like this:

inputs = {
    make: {
      options: [...],
      value: '-1'
    },
    model: {
      options: [...],
      value: '-1'
    }
}

validationRules
.on(this.inputs.make)
   .ensure('value')
      .required()
      .satisfies(value => value !== '-1')
.on(this.inputs.model)
  .ensure('value')
     .required()
     .satisfies(value => value !== '-1')

<div repeat.for="input of inputs | keys">
  <select  value.bind="inputs[input].value & validate" >
    <option repeat.for="option of inputs[input].options"  value.bind="option.value">
      ${option.text}
    </option> 
  </select>
</div>

They when the user click a button this is called:

async validate() {
    const result = await this.validationController.validate()
    
    if (result.valid) {
      console.log('Yeahhh')
    }
}

However, the rules don’t seem to get applied and the result is always valid. Any thoughts?

2

I think it’s due to this:

If I add in:

<select class="form-select" value.bind="inputs.make.val & validate">
    <option repeat.for="option of inputs.make.options" value.bind="option.value">
      ${option.text}
    </option>
</select>

Then validation seems to be working.

3

Note that this is not yet supported. There is already an issue for this: Validation triggering not working on dynamically accessed props · Issue #1623 · aurelia/aurelia · GitHub.

1 Like