Почему ng-шаблон Angularjs не работает со следующим регулярным выражением?

По какой-то причине инициализированное значение не отображается в поле, но второе поле без ng-паттерна работает. Любые идеи?

    angular.module('app', []).controller('MainCtrl', function($scope) {
      $scope.widget = {title: 'abc', title2: 'abc'};
    });

    <div ng-app="app" ng-controller="MainCtrl">
     <input ng-model="widget.title" required ng-pattern="/[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/">
     <br /><br />   
     input 1: {{ widget.title }}
     <br /><br />   
     <input ng-model="widget.title2" required>
     <br /><br />   
     input 2: {{ widget.title2 }}
    </div>

Вот скрипт http://jsfiddle.net/wkzab/1/.


javascript angularjs regex angularjs-scope angularjs-model
person Will    schedule 09.04.2014    source источник
comment
Кажется, что первый ввод не отображается, пока он не соответствует регулярному выражению, например, попробуйте: abcZ123456ABC.   -  person Sam    schedule 09.04.2014
comment
Я хочу проверить строки в виде ABCD123456X3Z   -  person Will    schedule 09.04.2014
comment
Спасибо, @Sam, но знаешь почему? Я имею в виду, какая логика стоит за этим?   -  person Will    schedule 09.04.2014

Ответы (3)


arrow_upward
19
arrow_downward

ОБНОВЛЕНИЕ

Я немного изучил его (на самом деле никогда не использовал Angular), и, используя атрибут name в форме и входных данных, вы можете получить ошибку, как показано в моем новейшем JSFiddle. В формате: {{formName.inputName.$error}}. Это возвращает объект с параметрами, равными логическому значению. Таким образом, {{form.title.$error.pattern}} будет true, когда есть ошибка с регулярным выражением (чтобы вы отобразили ошибку). Я также очистил (работает так же) ваше регулярное выражение: /^[A-Z]{4}\d{6}[A-Z\d]{3}$/i.

СТАРЫЙ

Атрибут ng-pattern пытается сопоставить поле на основе этого регулярного выражения: /[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/. Это соответствует 4 буквенным символам, 6 цифрам и 3 буквенно-цифровым символам. Как только у вас будет соответствующий шаблон, он появится.

Вы должны иметь возможность удалить атрибут ng-pattern или изменить выражение, чтобы оно было менее конкретным. Например, этот JSFiddle будет принимать любое значение, если вся строка является буквенно-цифровой. Обновите вопрос, если вам нужна помощь с другим шаблоном.

person Sam    schedule 09.04.2014
comment
Отличный ответ, дело в том, что я хочу проверить этот шаблон (ABCD123456X3Z), который является мексиканским идентификационным номером налогоплательщика, и я хочу иметь возможность отображать сообщение об ошибке, например: Введенная вами строка ABCDEF недействительна. Где ABCDEF — пользовательский ввод. - person Will; 09.04.2014
comment
Спасибо за ваше время и усилия @Sam ваш камень! но я все еще не могу получить доступ к значению поля, если оно не соответствует шаблону. Может быть, это то, как угловой должен работать? Должен ли я просто принять это? Два странных поведения: 1. При загрузке страницы первое поле не содержит начальное значение, которое было установлено на контроллере. 2. Как только я начинаю печатать, атрибут title в объекте виджета исчезает. (Я знаю, что он появляется снова, когда он соответствует шаблону) - person Will; 09.04.2014
comment
Не совсем уверен, является ли это предполагаемым поведением Angular или есть способ его обойти. Хотя я бы предположил, что так и было задумано. Подумайте, если у вас есть модель со свойством zip, которое должно соответствовать [0-9]{5}, вы используете этот почтовый индекс для запроса к базе данных ресторанов. Если значение по умолчанию (или значение, которое кто-то вводит) равно abc, должно ли zip равняться abc или null? Я думаю, что null, поэтому он больше нигде не используется (т.е. неправильно запрашивает БД). - person Sam; 09.04.2014
comment
Я все еще думаю, что это странно. Нужно иметь доступ к значению, даже если оно неверно, чтобы вы могли сообщить пользователю... значение не является допустимым значением. В любом случае, я отмечу ваш ответ как правильный, чтобы указать на все эти вещи. - person Will; 09.04.2014
comment
Я согласен, что это немного странно. Несмотря на то, что документация, кажется, конкретно не говорит, что это работает так или как это обойти, вы можете видеть, что это нормальное поведение, если вы замените фамилию на что-то слишком короткое в их пример. - person Sam; 09.04.2014
comment
Вы правы, та же проблема в их примере. Большое спасибо @Sam! - person Will; 09.04.2014

arrow_upward
46
arrow_downward

Я тоже столкнулся с такой же проблемой. Нашел обходной путь для этого.

Вы должны сделать что-то подобное в своем контроллере.

$scope.myRegex = /[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/; (не заключайте выражение в кавычки)

Окончательно

<input ng-model="widget.title" required ng-pattern="myRegex">

Теперь он будет работать.

person Ved    schedule 25.08.2014
comment
Арх! Просто потратил час, пытаясь понять, почему шаблон не работает. Я помещал это непосредственно в атрибут pattern, затем ng-pattern Им действительно нужно лучше документировать это. Спасибо! - person m.e.conroy; 14.07.2015
comment
@ved, что, если я получаю регулярное выражение в виде строки с этого сервера, я имею в виду, у меня есть $scope.myRegex = /[a-zA-Z]{4}[0-9]{6,6}[a-zA -Z0-9]{3}/; в любом случае сейчас? - person vivex; 29.09.2015
comment
@Vivek Возьмем случай, если вы поместите регулярное выражение в виде строки, я имею в виду внутри. Теперь, как вы пишете регулярное выражение, которое будет соответствовать кавычкам. Для получения подробной информации посетите: developer.mozilla.org/en/docs/ Интернет/JavaScript/Руководство/. - person Ved; 30.09.2015
comment
Просто примечание: в моем контроллере я заключил регулярное выражение в кавычки, и оно все еще работает. - person Harry; 22.02.2016
comment
@Harry, ты можешь создать скрипку своего кода. Я покажу вам разницу. - person Ved; 02.03.2016
comment
@Ved вот мое регулярное выражение, которое я использую [a-zA-Z._^%$#!~@,']+ - person Harry; 02.03.2016
comment
Пожалуйста, опубликуйте скрипку, чтобы я мог проверить, как вы ее используете. - person Ved; 02.03.2016
comment
Спасибо за упоминание, чтобы не брать это в кавычки - это была моя проблема - person Martin D; 13.06.2016
comment
Просто для информации: если вы копируете регулярное выражение в Intellij IDEA, вы можете увидеть, что '\' заменяется двойным '\\'. Даже шаблон в HTML выглядит одинаково, ввод не проверяется! Поэтому замените двойную косую черту на одинарную. jsfiddle.net/wkzab/1492 - person Dmitri Algazin; 26.10.2018

arrow_upward
1
arrow_downward

Да, в самом деле! Это вызывало у меня проблему... отсутствие кавычек - это то, что исправило это для меня.

 $scope.regVal= /([A-Z]{3}\s?(\d{3}|\d{2}|d{1})\s?[A-Z])|([A-Z]\s?(\d{3}|\d{2}|\d{1})\s?[A-Z]{3})|(([A-HK-PRSVWY][A-HJ-PR-Y])\s?([0][2-9]|[1-9][0-9])\s?[A-HJ-PR-Z]{3})/;
person EltonFlow    schedule 08.08.2016