Validation inside slots

Hi, are there any specialties I should know about when using Aurelia Validation with content projection using slots?

I have a custom control with two-way bindable property called value. Inside the custom control there is <input type="text" value.bind="value" blur.trigger="blur()">. I bind a value to this custom control from outside using <custom-control value.bind="something & validate"></custom-control>. The validation works well.

But when I move the <input> element from the custom control one-level deeper, having <something-with-default-slot><input type="text" value.bind="value" blur.trigger="blur()"></something-with-default-slot> in the original custom control instead, the value doesn’t get validated, even if manually asked for.

Thanks!

1 Like

Ignore me :-). Just realized it is likely caused by the ValidationRenderer which expects the DOM to look a bit differently. The usage of the extra template with slots sent my HTML control to a different place…

I am new to Aurelia Validation and would use some tips on how to structure it: I have several forms with validation, which are composed of quite complex structure of custom elements with the real HTML controls somewhere deeper in the hierarchy. Is it a common pattern to instantiate/add ValidationRenderers into the injected ValidationController in the custom controls deeper in the hierarchy themselves? For now I use just one ValidationRenderer for my HTML controls wrapper, and I add it to a controller at the root form component, but I have a feeling I may need more, for lists etc…

1 Like