정규식으로 YouTube 동영상을 걸러 내기

Question

입력란이 있고 입력란 이름에 YouTube가있는 경우 regex를 사용하여 확인하고 싶습니다.

<input name="videoUrl" ng-pattern="youtubeRegex" required ng-model="video.url" type="text" class="form-control" id="video-link" placeholder="Enter video link from youtube"> 
<p ng-show="videoForm.videoUrl.$invalid && !videoForm.videoUrl.$pristine"> 
            the link has to be from youtube 
           </p> 

와 컨트롤러의

은 내가 오류를 입력하기 시작 때 즉시 표시하고 나는 여전히 같은 잘못을 확인합니다 유튜브에서 링크를 붙여 경우에도

$scope.youtubeRegex= 'youtube'; 

있습니다.

$scope.youtubeRegex= /youtube/; 

가 여기 Plunkr :

Answer 1

는 귀하의 정규 표현식을 변경

http://plnkr.co/edit/4Y3RkPccKxxoSQJFf2Zj?p=preview

이 제대로 붙여 넣을 수 있습니다. 당신이 입력 할 때 그것은 기술적으로 부정확하기 때문에 멀리에서 오류를 보는대로 이것은 예상 된 동작입니다. 이를 피하려면 사용자가 입력을 마쳤을 때 오류 메시지 표시를 실행하고 싶을 것입니다.

제출 버튼을 사용하면 물론 ngBlur을 사용하여 사용자가 입력을 완료 한 후 양식의 유효성 상태를 확인하고 메모를 표시하거나 숨기는 기능을 실행할 때도 마찬가지입니다. 같은 줄을 따라 ngModeloptions.debounce을 사용할 수도 있습니다.

개념은 동일합니다. 양식 유효성을 확인하고 오류 요소를 표시하거나 숨 깁니다.