Angular2 模型驱动的表单验证器模式
Angular2 model-driven form validator pattern
我试图使表单只有在匹配特定模式时才有效。
它必须匹配：
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 是否需要给他 ^ 和 $ 符号来分隔要评估的字符串。
设置 Validator.maxLength 将不允许用户键入超过给定长度的字符。
new FormControl('', Validators.maxLength(9)
您必须使用双反斜杠，因为模式作为字符串文字传递给正则表达式引擎，而正则表达式转义需要使用 \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})$，并且将像 in this demo.
一样工作
详细信息：该模式将匹配 2 个备选方案：
\d{3}([- ])\d{3}\1\d{3} - 3 位数字，- 或 space（捕获到第 1 组），然后是 3 位数字，然后是与第 1 组中相同的分隔符，然后是 3 位数字| - 或\d{9} - 9 位数
由于 ^ 和 $ 是由 angular 添加的，因此模式将需要完整的字符串匹配。
我试图使表单只有在匹配特定模式时才有效。
它必须匹配：
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 是否需要给他 ^ 和 $ 符号来分隔要评估的字符串。
设置 Validator.maxLength 将不允许用户键入超过给定长度的字符。
new FormControl('', Validators.maxLength(9)
您必须使用双反斜杠，因为模式作为字符串文字传递给正则表达式引擎，而正则表达式转义需要使用 \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})$，并且将像 in this demo.
详细信息：该模式将匹配 2 个备选方案：
\d{3}([- ])\d{3}\1\d{3}- 3 位数字，-或 space（捕获到第 1 组），然后是 3 位数字，然后是与第 1 组中相同的分隔符，然后是 3 位数字|- 或\d{9}- 9 位数
由于 ^ 和 $ 是由 angular 添加的，因此模式将需要完整的字符串匹配。