How to prefill a radio button / checkbox with object values

Help Requests
1

Hello, we’ve had an Aurelia project up and running for a while now but some time ago we noticed that some of our radiobuttons and checkboxes weren’t automatically prefilled anymore. We were using following syntax (also partly found in the documentation):
app.ts

export class App {
  products: any[] = [
    { id: 0, name: 'Motherboard' },
    { id: 1, name: 'CPU' },
    { id: 2, name: 'Memory' },
  ];

  selectedProduct: any = { id: 1, name: 'CPU' };

  productMatcher(a, b) {
    return a.id === b.id;
  }
}

app.html

<template>
  <div>
    <label repeat.for="product of products">
      <input type="radio" name="group2"
              model.bind="product"
              matcher.bind="productMatcher"
              checked.bind="selectedProduct">
      ${product.name}
    </label>
  </div>
</template>

It is a sort of merger between the examples found on https://aurelia.io/docs/binding/radios#objects and https://aurelia.io/docs/binding/radios#objects-with-matcher, with the only difference being that one uses a repeater and the other one doesn’t.
The problem is that it used to work before and doesn’t anymore now, did something change and if so, can someone help us out here?

2 Likes
2

I don’t know why it doesn’t work within a repeater. I verified the issue with a pristine app created with latest version of aurelia-cli using default TS config.

What I would do instead is just use selectedProduct: any = products[1]; and forget about matchers. Of course if your real-life scenario is much more complicated than the examples and you MUST use matchers, I don’t know what to do.

EDIT: I forked the CodeSandbox example from https://aurelia.io/docs/binding/radios#objects-with-matcher and put the <label> inside a repeater; it stopped working too.

2 Likes
3

Thank you for the confirmation. While our scenario was a indeed a little bit more complicated, your suggestion did help out for a temporary fix by just overwriting the existing value by the corresponding index in the repeated array so it’s something! :slight_smile:

1 Like
4

It seems someone also filed a similar issue in templating-resources at https://github.com/aurelia/templating-resources/issues/388

Can you have a look and try with my suggestion in the comment there?

5

I created a pristine new app from latest version of the CLI and could still reproduce the issue. Does that mean the CLI template needs updated too?

1 Like
6

What is the version of templating resources?

7 
➜ aurelia --version
Global aurelia-cli v1.1.1

➜ aurelia new aurelia-app --unattended --select typescript,jest,vscode,yarn

➜ jq -r '.version' node_modules/aurelia-templating-resources/package.json
1.12.0
1 Like
8

I’ve updated the github issue with correct answer at https://github.com/aurelia/templating-resources/issues/388#issuecomment-532198123.

@AxelVerstappen Can you try the following in your app entry (probably main.ts):

import {Repeat} from 'aurelia-templating-resources';

Repeat.useInnerMatcher = false;

The reason is without static field useInnerMatcher, it would have been a breaking changes. So we made it an opt-in fix.

1 Like
9

@bigopon this together with updating aurelia-templating-resources to latest version seems to work for us! Thank you very much!

2 Likes