$scope.var дает неопределенность в angularjs

Я использую angularjs для проверки на стороне клиента в текстовом поле, где мне нужно вводить только буквенно-цифровые символы. Если текстовое поле оставлено пустым или введен небуквенно-цифровой символ, форма отправки отправляет «ложь» в JS, что желательно, но проблема в том, что он не передает сам небуквенно-цифровой символ (в области).

Файл JSP:

    <form name="addressForm" method="post" 
ng-submit="submitform(addressForm.$valid)" novalidate>
    ..
    <input ng-model="address" type="text" 
**ng-pattern**="/^[a-zA-Z0-9 ]*$/" required="true"/>

Файл JS:

$scope.submitform= function(isValid){
var inputAddr = $scope.address;
alert(inputAddr);  //coming as undefined
...

Теперь, когда я ввожу буквенно-цифровой символ в поле ввода «адрес» в jsp, он выдает мне undefined при предупреждении об этом в JS (вероятно, из-за шаблона, который фильтрует символ, не являющийся буквенно-цифровым). Если я удаляю ng-шаблон, он передает submitForm, передает «true», как будто каждый ввод «как ожидалось». Причина, по которой я хочу получить доступ к $scope.address, состоит в том, чтобы проверить, оценить и отобразить разные сообщения об ошибках для «пустой» и «не буквенно-цифровой» проверки.

Любая помощь приветствуется!


angularjs ng-pattern
person user3137592    schedule 24.04.2014    source источник
comment
К сожалению, именно так работает ng-pattern, он просто оставит модель неопределенной, пока значение не совпадает. Нам пришлось прекратить его использование, потому что мы столкнулись с точно такой же проблемой. Наше решение состояло в том, чтобы выполнить проверку в контроллере, но я не думаю, что это хорошее решение. Механизм проверки формы Angular, на мой взгляд, сломан до такой степени, что он более или менее совершенно бесполезен.   -  person ivarni    schedule 24.04.2014
comment
Извините, я с вами не согласен. Проверка угловой формы очень полезна, но нам нужно понять, как она работает. Значение модели присваивается только тогда, когда модель действительна. Когда это неверно, мы должны проверить свойство $viewValue, чтобы получить то, что набрал пользователь.   -  person Alexandre TRINDADE    schedule 24.04.2014

Ответы (2)


arrow_upward
6
arrow_downward

Если модель недействительна, значение не присваивается модели. Если вы хотите увидеть, что набрал пользователь, вам нужно проверить $viewValue:

Вы должны добавить атрибут имени для ввода, поэтому измените свой входной html на:

<input ng-model="address" type="text" name="address"
ng-pattern="/^[a-zA-Z0-9 ]*$/" required="true"/>

И измените функцию отправки на

$scope.submitform = function(isValid) {
    console.log($scope.addressForm.address.$viewValue);  
}
person Alexandre TRINDADE    schedule 24.04.2014
comment
Да, это другой подход. Хороший улов в необходимости указать значение для атрибута name. - person Sunil D.; 24.04.2014

arrow_upward
1
arrow_downward

Похоже, вам просто нужно знать, что такое ошибка проверки.

Вы можете проверить свойство $error FormController (addressForm в вашем случае), чтобы увидеть, какие проверки прошли или не прошли.

Например, если вход пуст, то «требуемая» проверка не пройдена, и addressForm.$error.required будет Array, содержащим входы, которые не прошли эту проверку.

Если «требуемая» проверка прошла успешно, то addressForm.$error.required будет просто false.

Вы можете легко использовать это в угловых выражениях:

<p ng-show="addressForm.$error.required">This field is required.</p>

Или вы можете получить доступ к форме через объект $scope, связанный с представлением:

if ($scope.addressForm.$error.required) {
   // required validation failed
}

Ознакомьтесь с документацией для FormController и ngModelController.

person Sunil D.    schedule 24.04.2014
comment
При этом вы должны убедиться, что ваш form внезапно не окажется внутри директивы, которая создает изолированный scope (например, ng-if), иначе вы внезапно больше не сможете получить доступ к FormController. Пока вы знаете, что этого никогда не произойдет, это сработает. - person ivarni; 24.04.2014
comment
@ivami Да, определенно это довольно болезненно с любыми динамическими формами. Я в основном согласен с вашим комментарием, проверка в Angular должна быть проще :) - person Sunil D.; 24.04.2014
comment
PS: этот вопрос может помочь людям, пытающимся найти FormController в динамически генерируемых формах. - person Sunil D.; 24.04.2014
comment
Да, определенно есть способы найти ссылку FormController, но я искренне считаю, что лучше просто выполнить собственную проверку с комбинацией пользовательских директив и служб, вызываемых из контроллера. Но нам не нужно прыгать через обручи, чтобы получить доступ к полям ввода. Я надеюсь, что они посмотрят на это для Angular 2.0. - person ivarni; 24.04.2014
comment
Мне нравится ваша formLocator идея, я мог бы даже попробовать ее использовать, я просто думаю, что она не должна быть нужна :) - person ivarni; 24.04.2014
comment
@СунилД. Это правда, что .required сообщит мне, является ли поле пустым или заполненным, но как я узнаю, является ли заполненное значение буквенно-цифровым или нет, если я не использую $viewValue. - person user3137592; 28.04.2014
comment
@user3137592 user3137592 ng-pattern также является валидатором, поэтому, когда шаблон не соответствует вашему буквенно-цифровому регулярному выражению, он также устанавливает значение для объекта $error. Проверьте значение $error.pattern. - person Sunil D.; 28.04.2014