To create custom attribute on input html element in Aurelia

Question

I want to create a custom attribute input-format I can assign two values to the attribute that would enable me to clean the input string or to trim input string.

Like below:

For value clean:

Trying to achieve declaring as below

    <input
         type="text"
         placeholder="enter text with illegal characters"
         value.bind="dirtyString"
         input-format= "format : clean"
    />

The above should result me with the below embedded into the input element:

     <input
            type="text"
            placeholder="enter text with illegal characters"
            value.bind="dirtyString | cleanString & updateTrigger:'blur'"
            keypress.delegate="keypress($event)"
      />

Similarly for trim

    <input
         type="text"
         placeholder="enter your name"
         value.bind="Name"
         input-format= "format : trim"
     />

should result in:

    <input
        type="text"
        placeholder="enter your name"
        value.bind="Name | trimString & updateTrigger:'blur'"
    />

where cleanString, trimString, are value converters and keypress function which are already declared as needed. I need help with creating custom attribute as I am not sure of getting the current value bound to an html input element and also reassigning that to have all the above value converters and a function.

Can anyone please help me on achieving this? Appreciate your input and help.

This is where I stand:

import * as au from "aurelia-framework";

@au.autoinject
@au.customAttribute("input-format")
export class InputFormat {
  constructor(element: Element) {
    this.element = element;
  }

  @au.bindable
  format: string;
  formatChanged(name: string, newValue: string, oldValue: string) {
    // need to have case statements 
    switch(name){
        case 'clean':
          // to assign the relevant value converter and the 'value' is to be passed into
          // this assigment should result something like below
          // <input
          // type="text"
          // value.bind="Name | cleanString & updateTrigger:'blur'"
          // keypress.delegate="keypress($event)"
         //  >
          break;
        case 'trim':
          // to assign the relevant value converter the 'value' is to be passed into
          // <input
          // type="text"
          // value.bind="Name | trimString"          
         //  >
          break;
        default:
          // to leave the assigment as is 
          break;
      }

  }
  // the select list
  element: Element;
  val: any;
}

here is the link where I am trying to put things together: sand box link