Как использовать трубу во входном тексте, используя ngModel Angular - PullRequest
Новая
       41

Как использовать трубу во входном тексте, используя ngModel Angular

2 голосов
/ 25 сентября 2019

У меня был выпадающий компонент (список кредитных карт), который связывает раскрывающееся значение на input, используя ngModel Мне удалось привязать выпадающее значение на входе, затем мне нужно отобразить номер кредитной карты на поле ввода, которое выглядит как пуляспециальный символ: 

4444 •••• •••• 4444

с помощью pipe, мне удалось связать его с выпадающим компонентом, но возникла проблема при привязке к input из-за ngModel, это то, что я пытался:

mask.pipe.ts 

transform(value: string, showMask :boolean): string {

    if (typeof value === "number") {
        value = JSON.stringify(value);
    }

    if (!showMask || value.length < 16) {
        return value;
    }

    return `${value.substr(0, 4)} ${'&#x25cf;'.repeat(4)} ${'&#x25cf;'.repeat(4)} ${value.substr(value.length - 4, value.length)}`;
}

html компонент 

  <input placeholder="value"
    [ngModel]="selectedCard.value | maskInput: true"
    (ngModelChange)="selectedCard.value = $event"type="text">

и вывод: 

1111 &#x25cf;&#x25cf;&#x25cf;&#x25cf; &#x25cf;&#x25cf;&#x25cf;&#x25cf; 1111

это моя демонстрация stackblitz , есть какие-либо предложения о том, как решить эту проблему, или лучшую практику?

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Используйте символы Unicode: стекаблиц 

  transform(value: string, args?: any): any {
    const start = value.substr(0, 4);
    const end = value.substr(-4, 4);
    const bullets = '\u2022';
    return `${start} ${bullets.repeat(4)} ${bullets.repeat(4)} ${end}`;
  }

Коды Unicodes

0 голосов
/ 25 сентября 2019

Ваш подход кажется идеальным,

Просто замените &#x25cf на ●

Примерно так: 

 return `${value.substr(0, 4)} ${'●'.repeat(4)} ${'●'.repeat(4)} ${value.substr(value.length - 4, value.length)}`;

Рабочая демонстрация

...