[英]Angular2 model-driven form validator pattern
I'm trying to make a form valid only if it matches a certain pattern. 我试图使表单仅在与特定模式匹配时才有效。
It must match: 它必须匹配:
123456789
123-456-789
123 458 789
Here is my pattern: 这是我的模式:
^(\d{3}-\d{3}-\d{3})|(\d{3} \d{3} \d{3})|(\d{9})$
First, fun fact, to be able to use it on Validator, it seems i've to escape every slash in it. 首先,有趣的事实是,要能够在Validator上使用它,似乎我必须转义其中的每个斜杠。
Validators.pattern('^(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})$')
And my problem is it doesn't restrict the total string size number. 我的问题是它不限制总的字符串大小数字。
For example, it matches 1234567890000, i would like it to stop at 123456789 and any additional character would trigger the false state. 例如,它匹配1234567890000,我希望它在123456789处停止,任何其他字符都将触发假状态。
I tried these variants: 我尝试了以下变体:
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})')
Another fun fact, if I set it to: 另一个有趣的事实是,如果我将其设置为:
Validators.pattern('\\d{9}')
or 要么
Validators.pattern('^\\d{9}$')
Then i can only set exactly 9 characters. 然后我只能设置9个字符。
I'm sure it's a regex error, but i don't understand if Angular2 requires to give him ^
and $
symbols to delimit the string to be evaluated. 我确定这是一个正则表达式错误,但是我不知道Angular2是否需要给他^
和$
符号来界定要评估的字符串。
You must use double backslashes because the pattern is passed to the regex engine as a string literal, and regex escaping requires literal backslashes with \\d
, \\w
, etc. 您必须使用双反斜杠,因为该模式将作为字符串文字传递给regex引擎,而正则表达式转义要求使用\\d
, \\w
等文字反斜杠。
From what I see from my testing, angular adds ^
and $
anchors around the pattern without grouping it. 从我的测试中看到,angular在模式周围添加了^
和$
锚, 而没有对其进行分组 。
That means, when you have alternation groups, wrap them with a grouping construct so that the anchors could be applied to all the alternatives. 这意味着,当您有交替组时,请用分组构造将它们包装起来,以便可以将锚应用于所有替代组。
Your ^(\\\\d{3}-\\\\d{3}-\\\\d{3})|(\\\\d{3} \\\\d{3} \\\\d{3})|(\\\\d{9})$
and other attemped patterns contain unwrapped alternatives, so ^
only applies to (\\\\d{3}-\\\\d{3}-\\\\d{3})
and $
only applies to (\\\\d{9})
. 您的^(\\\\d{3}-\\\\d{3}-\\\\d{3})|(\\\\d{3} \\\\d{3} \\\\d{3})|(\\\\d{9})$
和其他尝试模式包含未包装的替代项,因此^
仅适用于(\\\\d{3}-\\\\d{3}-\\\\d{3})
而$
仅适用于(\\\\d{9})
。
Use 采用
'(?:\\d{3}([- ])\\d{3}\\1\\d{3}|\\d{9})'
Inside the validator code, it will appear as ^(?:\\\\d{3}([- ])\\\\d{3}\\\\1\\\\d{3}|\\\\d{9})$
, and will work like in this demo . 在验证程序代码中,它将显示为^(?:\\\\d{3}([- ])\\\\d{3}\\\\1\\\\d{3}|\\\\d{9})$
和将像本演示一样工作。
Details : the pattern will match 2 alternatives: 详细信息 :该模式将匹配2个替代方案:
\\\\d{3}([- ])\\\\d{3}\\\\1\\\\d{3}
- 3 digits, -
or space (captured into Group 1), then 3 digits, then the same separator as in Group 1, and then 3 digits \\\\d{3}([- ])\\\\d{3}\\\\1\\\\d{3}
-3位数字, -
或空格(捕获到第1组中),然后是3位数字,然后使用与组1,然后是3位数字 |
- or - 要么 \\\\d{9}
- 9 digits \\\\d{9}
-9位数字 Since the ^
and $
are added by angular, the patterns will require full string match. 由于^
和$
是按角度添加的,因此模式需要完整的字符串匹配。
设置Validator.maxLength将不允许用户键入超过给定长度的字符。
new FormControl('', Validators.maxLength(9)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.