To create custom attribute on input html element

Help Requests
1

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

1 Like
2

How about a custom behavior instead? Then you would
<input value.bind='dirtyString & format: 'trim'>

3 Likes
3

Could you please give me an example of how you would code that part. Like how would you let input element’s value know to consider the evaluating ‘format’ option. Any working sandbox would be of great help so I can try out things.

1 Like
4

have a look at the original updateTrigger behaviour https://github.com/aurelia/templating-resources/blob/master/src/update-trigger-binding-behavior.ts
There are also docs on custom binding behaviours

1 Like