在Aurelia中的输入html元素上创建自定义属性

我想创建一个自定义属性输入格式 我可以为属性指定两个值，使我能够清理输入字符串或修剪输入字符串

如下图所示：

清洁价值：

试图实现以下目标：

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

上述结果应包含以下嵌入到输入元素中的内容：

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

修剪也是如此

应导致：

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

其中，cleanString、trimString是已经根据需要声明的值转换器和按键功能。我需要有关创建自定义属性的帮助，因为我不确定是否将当前值绑定到html输入元素，也不确定是否将其重新指定为具有上述所有值转换器和函数

谁能帮我实现这个目标？感谢您的投入和帮助

这就是我的立场：

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;
}

import*作为au从“aurelia框架”导入；
@自动注入
@au.customAttribute（“输入格式”）
导出类输入格式{
构造函数（元素：元素）{
this.element=元素；
}
@可装订的
格式：字符串；
formatChanged（名称：string，新值：string，旧值：string）{
//需要有案例陈述
交换机（名称）{
“干净”一案：
//分配相关值转换器，并将“值”传递到
//此分配的结果如下所示
// 
打破
案例“修剪”：
//要分配相关值转换器，“值”将被传递到
// 
打破
违约：
//使分配保持原样
打破
}
}
//选择列表
元素：元素；
瓦尔：任何；
}

以下是我试图将事情组合在一起的链接：

---

你想做的是非常高级的东西。我敢说，自定义元素是实现这一点的更好方法。@AshleyGrant是的，你完全正确。所以我继续使用aurelia inputmask，它几乎解决了我的问题。必须为trim创建另一个值转换器，还必须使用另一个值转换器处理输入字段的初始化，因为它在第一次加载时会显示为未定义。所以现在这个解决方案可以在整个应用程序中应用，但是把所有内容都放在html输入元素上看起来很糟糕。我敢说，自定义元素是实现这一点的更好方法。@AshleyGrant是的，你完全正确。所以我继续使用aurelia inputmask，它几乎解决了我的问题。必须为trim创建另一个值转换器，还必须使用另一个值转换器处理输入字段的初始化，因为它在第一次加载时会显示为未定义。所以现在这个解决方案可以应用于整个应用程序，但是将所有内容都放在html输入元素上看起来很糟糕。

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;
}