Angular2モデル駆動型バリデーターパターン

Question

フォームを特定のパターンと一致する場合にのみ有効なフォームにしようとしています。

それが一致している必要があります。ここでは

123456789 
123-456-789 
123 458 789 

が私のパターンは次のとおりです。

^(\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})$') 

私の問題は、文字列のサイズの合計数を制限しないということです。

たとえば、1234567890000と一致します。私は123456789で停止したいと思います。追加の文字はfalse状態を引き起こします。

が、私はこれらの変異体を試してみました：

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

パターンが文字列リテラルとして正規表現エンジンに渡されるので、あなたは二重のバックスラッシュを使用しなければならない、と正規表現のエスケープは、私は私のテストから見たもの等から

、\d、\wとリテラルのバックスラッシュが必要です、角度^と$のアンカーをパターンにグループ化せずに追加します。です。

つまり、代替グループがある場合は、をグループ化構造体で囲み、アンカーをすべての選択肢に適用できるようにします。

あなた^(\\d{3}-\\d{3}-\\d{3})|(\\d{3} \\d{3} \\d{3})|(\\d{9})$およびその他のattempedパターンが開封された代替案が含まれているので、^のみ(\\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桁、-または空間（グループ1に取り込ま）、次いで3桁、グループ1と同じセパレータ、及び次いで、3桁の数字
|
• - 又は
• \\d{9}から9までの数字

^と$が角で追加されているため、パターンに完全な文字列の一致が必要です。

Answer 2

Validator.maxLengthを設定すると、指定された長さの文字を入力することはできません。

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