Как связать и показать границу значения при использовании aurelia, используя конвертеры значений или любой другой метод - PullRequest
Новая
       41

Как связать и показать границу значения при использовании aurelia, используя конвертеры значений или любой другой метод

1 голос
/ 12 июня 2019

Я пытаюсь использовать конвертер значений aurelia для анализа значений, введенных пользователем, удалив все недопустимые символы, введенные в поле ввода, и отобразив проанализированный текст.Но есть несколько крайних случаев, когда я не могу отобразить проанализированный текст пользователю, вместо этого отображается введенный текст с недопустимыми символами.На самом деле введенный текст фактически анализируется, поэтому мне интересно, что можно изменить, чтобы отобразить проанализированный текст.

Я попытался включить два оператора замены регулярных выражений, и, похоже, ничего не исправило.

преобразователь значений 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;
  }

Например: я печатаюв 'random ####' я ожидаю, что 'random' будет отображаться в поле ввода при вводе последнего символа, потому что я анализирую недопустимые символы.

Но я просто вижу 'random #### 'в текстовом поле, если я не введу дополнительный символ, который затем инициирует синтаксический анализ.

Так есть ли способ решить эту проблему?Какие изменения мне нужно будет сделать, чтобы это работало?Заранее благодарим за ваш вклад !!

Вот фрагмент того, что происходит:

enter image description here

Из консоли мы можем видеть на самом делевведенный текст анализируется как мне нужно, но он НЕ отображается как проанализированный текст в поле ввода, даже если это значение привязано к вводу.

Ниже приведена ссылка для кодов и окна для приведенного выше кода: песочница ссылка

Обновление :

Я попробовал одно из предложений из комментариев, используя событие нажатия клавиши.Это работает как шарм, пока вы не вставите строку со всеми недопустимыми символами.Есть ли способ обойти это?

1 Ответ

0 голосов
/ 14 июня 2019

Я чувствую, что это то, что я искал, и я чувствую, что нашел решение. Мне пришлось использовать концепцию преобразователя значений, события нажатия клавиши и правила привязки 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>

чистый-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);
  }
}

ссылка на рабочий код

Также обсуждение можно найти на сайте aurelia: ссылка для обсуждения

...