[Solved] Validation and HTML only custom elements

Help Requests
1

I have a list view (item-list.html) that allows a user to select an item in a list and displays the item details. I want to break out the view for the details of the selected item into an HTML only custom element (item-detail.html).

My understanding is that HTML only custom elements inherit the view-model of the parent. Because my detail view allows editing, my list view-model (item-list.ts) creates an instance of a ValidationController and registers validation rules. However, when I try to display the list, I’m getting an error stating:

A ValidationController has not been registered.

Questions

  1. Why doesn’t the detail view recognize the ValidationController of the items view-model the same way the items view does as both views essentially have the same view-model?
  2. Is it possible to accomplish this with an HTML only view?

Update
After posting this, I read another post that indicated that I need to use $this.$parent in item-detail.html to reference properties of the list view-model. Doing this seems to have everything working.

Here is my basic code:

item-detail.html

<template>
  <div class="input-group">
     <label for="name">Name</label>
     <input id="name" type="text" 
        value.bind="selectedItem.name & debounce:800 & validate" />
  </div>

item-list.ts

export class ItemList {
   public items : Item[] = []
   public selectedItem : Item = null;

   static inject = [NewInstance.of(ValidationController)]
   constructor(private vc: ValidationController){
      this.vc.validateTrigger =  validateTrigger.changeOrBlur;
      ValidationRules
         .ensure((i:Item) => i.name).required()
         .on(Item);
   }
}

item-list.html

<template>
  <require from="./item-detail.html"></require>
  <table>
    /*Item list*/
  </table>
  <div class="detail-pane">
     <item-detail></item-detail>
  </div>
</template>
1 Like