自定义 Angular 输入掩码

Question

我确实有一个 输入字段 ，其中填充了 JSON 对象数据。

 dimension: {
   length: 10.00,
   width: 20.00,
   height: 30.00,
 }

输入如下所示：

 <input matInput [placeholder]="Dimension (LxHxW)" formControlName="dimensions" 
        name="dimensions" mask="00.0x00.0x00.0" [specialCharacters]="['x', '.']" 
        [clearIfNotMatch]="true" [showMaskTyped]="true"
  />

其中维度在打字稿代码中构建为：

 let dimensions = null;
    if (dimensionObject) {
      dimensions = '' + dimensionObject.length + 'x' + dimensionObject.width + 'x'
        + dimensionObject.height;
    }

The goal is to map correctly the data on the mask and obtain the length, width and height concatenated with an x in between-> obtain a flexible mask.

维度值长度不同时出现问题：

例如如果尺寸是 2.3 x 12.3 x 42.2 而不是 2.3 x 12.3 x 42.2，它将显示 23.1 x 23.4 x 22。（x 移位）。

你们有什么解决办法吗？

Answer 1

我想你必须使用模式

以下摘自 this article on CSS-tricks, by Chris Coyier but created by Estelle Weyl 的示例显示了如何使用 A1A 1A1 格式处理加拿大邮政编码：

 <div>
   <label for="czc">Canadian Zip Code</label>
   <input id="czc" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" 
       data-charset="_X_ X_X" id="zipca" type="text" name="zipcodeca" 
       title="6-character alphanumeric zip code in the format of A1A 1A1" />
 </div>

在您的情况下，您应该只更改模式正则表达式。

Answer 2

"angular2-text-mask" NPM 库非常适合我。

https://www.npmjs.com/package/angular2-text-mask 如果您需要任何帮助，请告诉我。

谢谢。

自定义 Angular 输入掩码

Custom Angular Input Mask

directive

mask

angular