Aurelia Validation with view-only child elements

Help Requests
1

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)

@inject(ValidationControllerFactory)
export CustomElement {

  public value: string;
  public validationController: ValidationController;

  constructor(public validationControllerFactory: ValidationControllerFactory) {
    ValidationRules
      .ensure('value').required()
      .on(CustomElement);

    this.validationController = validationControllerFactory.create();
    this.validationController.addObject(this);
    this.validationController.addRenderer(/* ... */);
  }
}

<!-- custom-element.html (View) -->
<template>
  <require from="./child-element.html">
  <form>
     <!-- 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>
  </form>
</template>

<!-- 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>
</template>

What’s the best way to resolve this situation ?

1 Like
2

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

3

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.