Unique ids for checkbox + label in dynamic groups

[johngrimsey]

Possible it's my incorrect usage...

I have a dynamic array of FormGroups each containing a DynamicCheckboxGroupModel. Each checkbox has an id (for day of the week).

When rendered click events on labels correctly activate the first element on the page with matching id which sometimes is the wrong element. My problem is that if I create unique ids I can't bind data to the form without quite a lot of work to match data to fields via dynamic ids.

We may need dynamically generated unique ids?

Thanks for all your work on this, really great library.

[udos86]

@johngrimsey Thanks for pushing the envelope :-)

I'm not sure if I do fully understand your problem. Could you please show some HTML and explain what you're trying to achieve?

Currently all element groups of an form array do not get an id as this would lead to invalid markup. That's why I originally added DynamicIdDirective.

[johngrimsey]

Sure!

In this example, clicking any of the labels in the second group results in the corresponding checkbox of the first group being selected rather than the checkbox next to the clicked label.

Is the DynamicIdDirective something I should be using in this case to prevent non-unique ids on the checkboxes?

[udos86]

@johngrimsey Ok thanks. Actually the focus behavior is fully controlled by the browser. There should be no need for you to use DynamicIdDirective as this is just an internal utility. Could you maybe post the corresponding markup?

[johngrimsey]

All the markup's coming from the <dynamic-form-basic-control> directive!

The problem appears to be the checkboxes inside of dynamic FormGroups don't receive unique ids. So the browser is matching the first occurence in the DOM of an id when a label is clicked, and that first occurence will not always be the correct one.

(This behaviour is expected as its simply the browser adhering to the principle of unique id attribute values)

[udos86]

@johngrimsey Ok, I think I do understand now. The solution would be to wrap all checkbox inputs in ui-basic in the label tag like it's done in ui-bootstrap or ui-foundation. I'll update the template in 1.3.3.

[udos86]

@johngrimsey Yep, that should do it.

[johngrimsey]

Good plan, I was hoping that'd be the answer :)
Thanks for the update!