如何使用 ngModel Angular 在输入文本中使用管道答案

【问题标题】：How to use pipe in input text using ngModel Angular如何使用 ngModel Angular 在输入文本中使用管道
【发布时间】：2019-09-25 07:46:27
【问题描述】：

我有下拉组件（信用卡列表）在input 上绑定下拉值，使用ngModel 我设法在输入上绑定下拉值，然后我需要在看起来像子弹的输入字段上显示信用卡号特殊字符：

4444 •••• •••• 4444

通过使用pipe，我设法将它绑定到下拉组件上，但是由于ngModel，将它绑定到input 时出现问题，这是我尝试过的：

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 demo，有没有关于如何解决这个问题的建议或更好的做法？

【问题讨论】：

标签： javascript angular typescript input-mask

【解决方案1】：

你的方法看起来很完美，

只需将&#x25cf 替换为●

像这样：

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

Working Demo

【讨论】：

HTML 代码的存在是有原因的......任何人在他们的浏览器上没有使用正确的字体都会在他们的输入中出现错误（空白方块）
@hafizi 绝对不是。
@Maryannah 的回答太棒了:) 使用它

【解决方案2】：

使用 unicode 字符：stackblitz

  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 codes

【讨论】：