Проверка URL. ng-pattern не работает

$scope.regex = '^((http|https|ftp):\/\/)?([az]+\.)?[a-z0-9-]+(\.[az]{1,4}){1,2}(/.*\?.*)?$'; This is the regular expression i'm using to validate url, and its working fine. I have checked it on AngularJS website. 
 

Это html-fragment, где я пытаюсь проверить поле ввода. Однако это не работает. Также, когда я использовал ng-pattern, все другие проверки в поле ввода, кроме обязательных, также не работают. Любая идея, почему …

Ваш ng-pattern="regex" содержит строковое regex как его значение. Чтобы обратиться к реальной переменной $scope.regex , вам нужно использовать синтаксис шаблона:

 ng-pattern="{{regex}}" 

Кроме того, поскольку шаблон определяется с использованием строки, вам нужно удвоить escape-обратную косую черту (см. Аналогичный пример кода на странице справки ngPattern ):

 $scope.regex = '^((https?|ftp)://)?([A-Za-z]+\\.)?[A-Za-z0-9-]+(\\.[a-zA-Z]{1,4}){1,2}(/.*\\?.*)?$'; 

Или просто поместите их в class персонажа, чтобы избежать какой-либо двусмысленности:

 $scope.regex = '^((https?|ftp)://)?([az]+[.])?[a-z0-9-]+([.][az]{1,4}){1,2}(/.*[?].*)?$'; 

Или даже передать объект RegExp так как вы можете использовать флаг, не учитывающий регистр:

 $scope.regex = "/^((https?|ftp):\\/\\/)?([az]+[.])?[a-z0-9-]+([.][az]{1,4}){1,2}(\\/.*[?].*)?$/i"; 

Альтернативно, такое же выражение, как указано выше, может быть определено с помощью конструктора RegExp:

 $scope.regex = RegExp('^((https?|ftp)://)?([az]+[.])?[a-z0-9-]+([.][az]{1,4}){1,2}(/.*[?].*)?$', 'i'); 

Я также предлагаю сократить http|https до https? ,

можно попробовать с помощью new RegExp

 new RegExp(pattern, option) 

Я использовал i как вариант игнорировать случай

 $scope.regex = $scope.regex = new RegExp('^((https?|ftp)://)?([az]+[.])?[a-z0-9-]+([.][az]{1,4}){1,2}(/.*[?].*)?$', 'i'); 

PLUNKER DEMO