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

Question

I am trying to use aurelia value converter to parse the values entered by a user by removing all the illegal characters entered in the input field and displaying the parsed text. But there are few edge cases, where I am unable to display the parsed text to the user, instead the entered text with the illegal characters are shown. As a matter of fact the entered text is actually parsed, so I am wondering what could be changed to show the parsed text.

I tried including two replace regex statements and nothing seem to correct this.

value converter clean-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;
  }

For instance: I type in 'random####' I expect 'random' to be shown in the input field as I type the last character, because I am parsing out the illegal characters.

But I just see 'random####' on the text field, unless I type an extra character which then triggers the parsing.

So is there a way to resolve this issue? What changes will I need to make for this to work? Thanks in advance for your inputs!!

Here is the snippet of what's happening:

From console we can see actually the entered text is parsed as I need but that's NOT being shown as parsed text on the input field, even though that is the value bound to the input.

Below is the link for the codesandbox for the above code: sandbox link

Update :

I tried one of the suggestion from the comments by using keypress event. It works like a charm until you paste a string with all illegal characters. Is there a way to get around that as well?

Answer 1

I feel this is what I was looking for and I feel I found the solution. I had to use the concept of value converter, keypress event and updateTrigger binding rule to make this work without any much hassle. Let me know if you find a better solution :)

Thanks a lot for all your inputs so far :)

This is what I did:

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

Also discussion can be found on aurelia website: discussion link