Aurelia Validation with view-only child elements

I am trying to use view-only child element to display a form, but I fail to use aurelia validation on fields in the child view. It works in the main view, but not in the child html-only view.

Here is my situation (unrelevant parts ommited):

// custom-element.ts (ViewModel)

export CustomElement {

  public value: string;
  public validationController: ValidationController;

  constructor(public validationControllerFactory: ValidationControllerFactory) {

    this.validationController = validationControllerFactory.create();
    this.validationController.addRenderer(/* ... */);
<!-- custom-element.html (View) -->
  <require from="./child-element.html">
     <!-- Works properly using & validate:validationController here  -->
     <ux-input value.bind="value & validate:validationController"></ux-input>

     <!-- But fails below -->
     <child-element validator.bind="validationController" value.bind="value"></child-validation>
<!-- child-element.html (HTML only child-view) -->
<template bindable="value, validator">
   <!-- But using & validate:validator here does not work -->
   <ux-input value.bind="value & validate:validator"></ux-input>

What’s the best way to resolve this situation ?

1 Like

Did you manage to get it work? If not, can you help create a pseudo codesandbox? I can help make it work

Base sandbox here [TypeScript] Sandbox

I didn’t find a solution with view-only child element. I can make it work with a VM-V but would like to see if we could do it without the VM.

Here is a CodeSandbox:

Edit Aurelia TypeScript Sandbox

You can set useChildElement to false to see how it works without child element.