如何在使用值转换器或任何其他方法使用 aurelia 时绑定和显示值绑定

Question

我正在尝试使用 aurelia 值转换器来解析用户输入的值，方法是删除输入字段中输入的所有非法字符并显示已解析的文本。但是在极少数情况下，我无法向用户显示已解析的文本，而是显示带有非法字符的输入文本。事实上，输入的文本实际上已被解析，所以我想知道可以更改什么以显示已解析的文本。

我试过包括两个替换正则表达式语句，但似乎没有什么可以更正这个问题。

值转换器清理-string.ts:

 export class CleanStringValueConverter {
   fromView(val) {
     val = val
           .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\])+/g, "")
           .replace(/([^a-z 0-9]+)/gi, "")
           .trim();
     console.log(val);
     return val;
   }
 }

app.html:

 <template>
      <require from="./clean-string"></require>

      <h3>Enter text with illegal charaters</h3>
      <input type="text" value.bind="dirtyString | cleanString" />
 </template>

app.ts:

  export class DCString{
    dirtyString: string;
  }

例如：我输入 'random####' 我希望 'random' 在我键入最后一个字符时显示在输入字段中，因为我正在解析非法字符。

但我只在文本字段中看到 'random####'，除非我键入一个额外的字符然后触发解析。

那么有办法解决这个问题吗？我需要进行哪些更改才能使其生效？预先感谢您的意见！！

这里是正在发生的事情的片段：

从控制台我们可以看到输入的文本实际上已按我的需要进行了解析，但在输入字段中并未显示为已解析的文本，即使这是绑定到输入的值。

下面是上述代码的 codesandbox 的 link： sandbox link

更新:

我使用按键事件尝试了评论中的一项建议。在您粘贴包含所有非法字符的字符串之前，它就像一个魅力。有没有办法解决这个问题？

Answer 1

我觉得这就是我一直在寻找的东西，我觉得我找到了解决方案。我不得不使用值转换器、按键事件和 updateTrigger 绑定规则的概念来轻松完成这项工作。如果您找到更好的解决方案，请告诉我:)

非常感谢您到目前为止的所有意见:)

这是我所做的：

app.html

  <template>
    <require from="./clean-string"></require>

    <h3>Enter text with illegal charaters</h3>
    <input
         type="text"
         value.bind="dirtyString | cleanString & updateTrigger:'blur'"
         keypress.delegate="keypress($event)"
    />
    <p>${dirtyString}</p>
  </template>

clean-string.ts

export class CleanStringValueConverter {
  fromView(val) {
    val = val
      .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\])+/g, "")
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return val;
  }

  toView(dirtyString) {
    dirtyString = dirtyString
      .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\])+/g, "")
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return dirtyString;
  }
}

app.ts

export class Color {
  dirtyString = "";

  keypress(event) {
    return /([a-z 0-9]+)/gi.test(event.key);
    // return !/[|!/&*:;$%@#`'_"^<>()+-.,\]/.test(event.key);
  }
}

link to working code

也可以在 aurelia 网站上找到讨论： discussion link

如何在使用值转换器或任何其他方法使用 aurelia 时绑定和显示值绑定

How to bind and show the value bound while using aurelia either using value converters or any other method

javascript

regex

aurelia