angular - 自定义角度输入掩码
问题描述
我确实有一个用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;
}
目标是正确映射掩码上的数据并获得长度、宽度和高度,并在两者之间连接一个 x ->获得一个灵活的掩码。
当维度值的长度不同时会出现问题:
例如,如果尺寸是 2.3 x 12.3 x 42.2 而不是 2.3 x 12.3 x 42.2,它将显示 23.1 x 23.4 x 22。(x 偏移)。
你们有什么解决办法吗?
解决方案
我想你必须使用模式
以下示例取自Chris Coyier 的这篇关于 CSS-tricks 的文章,由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>
在您的情况下,您应该只更改模式正则表达式。
推荐阅读
- mysql - SQL:计算 Q4-to-date 与 Q3-same-period 百分比变化
- angular - Ionic cordova run android --prod 仅在最新版本的打字稿中返回白屏
- java - 正则表达式仅匹配分隔符之间的特定空格
- caching - 将 Etags 与 ember-data 一起使用
- ios - GMSMapView 不允许偷看和弹出(3D 触摸)
- php - 无法对自定义帖子类型查询进行分页
- javascript - 如何在 LeafletJs 中使用 imageOverlay 设置图像而不调整大小
- elasticsearch - 在 Elasticsearch 中,如何获取特定用户的文档的平均时间差异?
- r - 如何制作分数条形图?
- c++ - 确定系统制表位长度