问题标签 [ngx-mask]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3415 浏览

angular - How to define fix numbers and/or chars with ngx-mask

Using ngx-mask, this would force me to enter 1234.56 - but let's say I only want to accept 99 as the last two digits, how would I need to define the mask? Can't make it work with custom patterns...

0 投票
0 回答
301 浏览

angular - 使用 @Inputs 的角度扩展指令

我正在尝试MaskDirective从 ngx-mask ( https://www.npmjs.com/package/ngx-mask ) 扩展 a。

我的目标是替换<input mask="(000) 000-0000"with的功能,<input myCustomPhoneNumber>以便我的应用程序中的所有电话号码都遵循相同的格式,从而减少拼写错误的风险。

我尝试过扩展,MaskDirective但无法使行为正确。这就是我所拥有的。

this.maskExpression属性是我认为控制父指令的东西,但它似乎没有采用我设置的值。

我也尝试过maskExpression

这在模板看起来像 <input myCustomPhoneNumber="(000) 000-0000">但不是<input myCustomPhoneNumber>

这就是我卡住的地方。任何帮助表示赞赏。

0 投票
1 回答
956 浏览

angular - 更改掩码格式时无法清除模板驱动表单中元素的值

我有一个文本框,我需要根据用户输入更改掩码格式并清除文本框。如果我更改掩码格式,文本框不会被清除,如果我删除掩码格式的条件,文本框会被清除

注意:我正在使用ngx-mask

堆栈闪电战

0 投票
1 回答
1188 浏览

html - 没有角度图案的数字键盘

我正在使用NgX-Mask来屏蔽我的输入框。我想在掩码中包含特殊字符,所以我使用[dropSpecialCharacters]="false"了 NgXMask。

由于角度验证,它显示红色指示器,因为模式不匹配。当前使用的模式\d*

验收标准
1 在 Safari 中,它应该默认显示数字键盘。(input pattern="\d*") 默认显示数字键盘。

预期结果
我想在模式中包含“:”字符,以便它显示绿色指示器

StackBlitz 示例

支持的应用程序:仅限 iPad

更新 此模式将匹配我的输入^([0-1][0-9]|[2][0-3]):([0-5][0-9])$
,但我将如何使用数字键盘

0 投票
2 回答
9085 浏览

angular - 如何获得 ngx-mask 掩码值?

我正在尝试在 ngx-mask 模块的帮助下为电话号码创建简单的字段,如下所示:

它可以工作,但控制 PhoneNumber 中的值是 999999999。如何使用掩码(即特殊符号和前缀)保存控制值?基本上我需要保存用户看到的价值:+1(999)9999-99

0 投票
2 回答
5556 浏览

angular - Angular - 使用 ngx-mask MatDatepicker 和反应形式输入

我想在表单上添加一个反应式表单控件并触发错误:

多个自定义值访问器匹配具有未指定名称属性的表单控件

一切都分开工作,反应式表单验证,掩码或matDatepicker,任何一对组合也可以工作,但三者一起提示错误。

这是我的代码:

在组件.ts

在 component.html 中

我正在使用:

0 投票
1 回答
51 浏览

angular - 使用ngx-mask在angula8中输入数字后如何使用ctrl + Z清除所有值

电话号码字段的掩码,但在这里如果我输入一些数字并按 ctrl+Z,它不会清除所有值,当我在输入后按 ctrlZ 时,它必须清除其中存在的所有值。

演示: 演示

TS:

HTML:

0 投票
1 回答
910 浏览

angular - Angular Nebular nbInput - 将掩码添加到输入字段中

我需要在输入文本字段(电话、日期、电子邮件等)中添加掩码。

我正在使用 Angular 和Nebular 5.0.0,根据官方文档,没有可用的 mask 属性。

我曾尝试如下添加ngx-mask-version(8.1.7),但没有奏效。

是否可以集成 ngx-mask 和 Nebular nbInput 组件?如果不可能,如何在输入字段中添加掩码?

0 投票
1 回答
822 浏览

angular - Angular FormControl 值实际上是什么,为什么它与 nativeElement 值不同?

更新:记录 blur 和 keyup 事件表明掩码永远不会进入 FormControl 值。这是为什么?即使在控件本身上调用 setValue() 方法也会去掉掩码。像:

这仍然剥离了面具。这里有什么想法吗?

原帖:

我正在使用 Angular 8.0.0、Angular forms 8.0.0、Angular Material 8.2.3 和 ngx-mask 8.1.5

我一直在构建一个动态表单并使用掩码来帮助指导用户输入正确的数据。

不管出于何种原因,FormControl 值都会去掉掩码。示例案例 - 建议零售价成本。

所以我有一个简单的输入,如下所示:

当用户键入时,它会为每个千位分隔符添加一个逗号,只让他们指定 2 个小数点,并在第一个数字之前保留一个美元符号和一个空格。很简单,而且很有效。

当需要将数据实际发送到其他地方时,就会出现问题。如果用户在该字段中输入数字并且掩码显示的是

130,000.56 美元

formControl 值实际持有的是 130000.56

我希望它实际保存输入值 $ 130,000.56

我能弄清楚如何做到这一点的唯一方法是直接在我的 TS 文件中引用 DOM 输入元素,并以这种方式获取值:

这绝对不是理想的,尤其是对 40 多个输入进行此操作。首先从 FormControl 值中删除掩码是否有原因?如果没有,是否有更好的方法来捕捉面具显示的价值?

0 投票
0 回答
1700 浏览

regex - NGX MASK 选项的字母数字出现错误的位置

经过几次尝试,我还没有找到解决方案,我想做一个面具。

这是我的问题:

我的面具组成:

  • 需要 3 个数字
  • 需要 1 个空间
  • 需要 1 个字母数字
  • 不需要 1 个字母
  • 需要 1 个空间
  • 需要 2 个数字

我的期望:

  • 123 AA 12
  • 123 12
  • 123 1 12
  • 123 12 12

在我的代码下方:

边.ts

边.html

当我写 123 AA 12 一切都很好,

当我写 123 A 12 时,“1”消失了,“2”出现了。

你有什么建议可以让我找到解决方案吗?