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{9}') 

또는

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

그리고 내가에만 설정할 수 있습니다 정확히 9 자 : 나는 그것을 설정하면,

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})') 

또 다른 재미있는 사실 :

나는 이러한 변형을 시도했다.

저는 정규식 오류라고 확신하지만 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)