Using Aurelia validation with table

Question

I have a table of rows/columns with input boxes, created like this:

Using this code (simplified):

<table>
  <thead>
    <!-- Column headings -->
    <tr>
      <th repeat.for="column of columns">
        ${column.display}
      </th>
    </tr>
  </thead>

  <tbody>
    <!-- Display all records -->
    <tr repeat.for="record of records">

      <!-- Show all column data for each record -->
      <td repeat.for="column of columns">
        <input type="text" value.bind="record[column.bind] & validate">
      </td>

    </tr>
  </tbody>
</table>

I have created a set of rules like this:

this.rules = ValidationRules
  .ensure("gs_mark").required().minLength(1).maxLength(3)
  .ensure("gs_min").required().minLength(1).maxLength(3)
  .ensure("gs_max").required().minLength(1).maxLength(3)
  .ensure("gs_description").required().minLength(2).maxLength(20)
  .rules;

Now I need to apply those rules to the records, so that I can validate all input boxes.

How can I do that? Should I .map() the records and do this.validationCtrl.addObject(this.record, this.rules); on each one? Can I somehow set up the validation on the binding of each type of control without the need to apply it to each record? Am I approaching this the wrong way?

This could be a bit of a departure from where you want to go - but I achieved the same when using Aurelia ORM. Each record is it's own entity, containing its own Validation rules. — Tom
Thanks for the tip. I briefly explored using Aurelia ORM but decided not to... another layer that I would have to learn and that might not actually benefit me much more than what I already have. But it's good to hear that they've included this type of per-record validation as well. — LStarky

LStarky LStarky · Accepted Answer · 2017-03-28T21:44:32

In the end, it seems the way to get it to work is to loop through the records and apply the rules to each row.

this.records.map((record) => {
  if ((typeof this.rules == 'object') && (this.rules.length)) {
    this.validationCtrl.removeObject(record);
    this.validationCtrl.addObject(record, this.rules);
  }
});

Works like a charm! I'm slightly concerned about the amount of memory this will consume for very large tables, but at least it works!

Using Aurelia validation with table

1 Answers