Angular2模型驱动的表单验证器模式

Question

我试图使表单仅在与特定模式匹配时才有效。

它必须匹配：

123456789
123-456-789
123 458 789

这是我的模式：

^(\d{3}-\d{3}-\d{3})|(\d{3} \d{3} \d{3})|(\d{9})$

首先，有趣的事实是，要能够在Validator上使用它，似乎我必须转义其中的每个斜杠。

Validators.pattern('^(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})$')

我的问题是它不限制总的字符串大小数字。

例如，它匹配1234567890000，我希望它在123456789处停止，任何其他字符都将触发假状态。

我尝试了以下变体：

Validators.pattern('^(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})$')
Validators.pattern('(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})')

另一个有趣的事实是，如果我将其设置为：

Validators.pattern('\\d{9}')

要么

Validators.pattern('^\\d{9}$')

然后我只能设置9个字符。

我确定这是一个正则表达式错误，但是我不知道Angular2是否需要给他^和$符号来界定要评估的字符串。

Answer 1

您必须使用双反斜杠，因为该模式将作为字符串文字传递给regex引擎，而正则表达式转义要求使用\\d ， \\w等文字反斜杠。

从我的测试中看到，angular在模式周围添加了^和$锚， 而没有对其进行分组 。

这意味着，当您有交替组时，请用分组构造将它们包装起来，以便可以将锚应用于所有替代组。

您的^(\\\\d{3}-\\\\d{3}-\\\\d{3})|(\\\\d{3} \\\\d{3} \\\\d{3})|(\\\\d{9})$和其他尝试模式包含未包装的替代项，因此^仅适用于(\\\\d{3}-\\\\d{3}-\\\\d{3})而$仅适用于(\\\\d{9}) 。

采用

'(?:\\d{3}([- ])\\d{3}\\1\\d{3}|\\d{9})'

在验证程序代码中，它将显示为^(?:\\\\d{3}([- ])\\\\d{3}\\\\1\\\\d{3}|\\\\d{9})$和将像本演示一样工作。

详细信息 ：该模式将匹配2个替代方案：

• \\\\d{3}([- ])\\\\d{3}\\\\1\\\\d{3} -3位数字， -或空格（捕获到第1组中），然后是3位数字，然后使用与组1，然后是3位数字
• | - 要么
• \\\\d{9} -9位数字

由于^和$是按角度添加的，因此模式需要完整的字符串匹配。

Answer 2

设置Validator.maxLength将不允许用户键入超过给定长度的字符。

new FormControl('', Validators.maxLength(9)