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?

Use "toView" method. refer: https://aurelia.io/docs/binding/value-converters#simple-converters — Naresh S, Jun 12 '19 at 21:18
Try to set your *clean-string.ts* with this content: `export class CleanStringValueConverter { toView(dirtyString) { return dirtyString.replace(/[^a-z 0-9]+/gi, ""); } }` and *app.ts* to `export class Color { dirtyString=""; } ` — Wiktor Stribiżew, Jun 12 '19 at 21:24
Maybe this is already answered in this link https://stackoverflow.com/questions/36507344/control-value-of-input-in-aurelia. To prevent each key you should use key events with a validation expression. Here's a modified version of your sandbox: https://codesandbox.io/s/bi-directional-value-converters-gkwvk?fontsize=14 — Cristián Ormazábal, Jun 12 '19 at 23:22
@CristiánOrmazábal your solution worked fine even though I was trying to figure out to make it work using value converters. Could you please explain me how the below keypress return statement work.. keypress(event) { return !/[|!\/&*:;$%@#`'_"^<>()+-.,\\]/.test(event.key); } — chethandb, Jun 13 '19 at 13:20
@WiktorStribiżew I tried your suggestion, it seems trying to enter an illegal character works but at some edge cases the value appear in the input field. For instance try entering same illegal character continuously, the character appears and disappears. so thought CristiánOrmazába solution solved it. But as per my question, it would have been interesting to know if this could be cracked completely by using value converter — chethandb, Jun 13 '19 at 13:28
@WiktorStribiżew kindly request you to remove the tag of duplicate as I haven't still found a solution. Solution of CristiánOrmazába works great unless if nothing pasted on to the input field. What if we paste a string with illegal characters? Is there a work around for that. Thank you in advance. — chethandb, Jun 13 '19 at 20:02
@CristiánOrmazábal your solution works great when we type.. what if a user copy pastes something on to the field and it contains all those characters which we were trying to prevent for them enter? any suggestion on that. Really appreciate your time a and effort. — chethandb, Jun 13 '19 at 20:04
Hi, I was trying to improve the sandbox to prevent pasting and here's what I found: tried first to activate the valueConverter associating the updateTrigger binding behavior to the 'paste' parameter. This worked sometimes, not always. Tried adding the debounce binding behavior, but without noticeable improvement. What I'd do if there wasn't another solution, would be to prevent pasting operations of that input field, or try to intercept the 'onpaste' event and do something similar to the keypress event. — Cristián Ormazábal, Jun 13 '19 at 22:25

chethandb · Accepted Answer · 2019-06-14T17:48:03.723

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

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

1 Answers1