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)