Отображение сообщения об ошибке для неверного ввода

Я хочу показать сообщение об ошибке при вводе неверного ввода в текстовое поле.Отображение сообщения об ошибке для неверного ввода

Сейчас я использую:

Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/> 
<span style="color:red" ng-show="myForm.pin.$invalid">Only number are allowed</span> 
<input type="Submit" class="form-control btn btn-success" ng-disabled="myForm.$invalid" value="Submit" />

Контроллер:

<script> 
      angular.module('myApp', []).controller("numOnlyRegex", function ($scope) 
      { 
       $scope.numOnlyRegex = /^\d+$/; 
      }); 
     </script>

Но прежде, как я пытаюсь показывает статическую сообщение ниже текстового ввода поля. Я хочу, когда пользователь вводит буквы вместо цифр, он должен показывать сообщение об ошибке, например, «разрешены только номера», иначе там не должно появляться сообщение об ошибке.

ng-show метод показывает статическое сообщение, когда вход пуст, но я хочу, чтобы показать ошибку только тогда, когда есть ошибка (более реалистичный путь)

источник

2015-06-12 kittu

Хочет сообщение об ошибке, чтобы показать только, когда пользователь вводит неправильный ввод (не тогда, когда поле ввода пусто?) – nalinc

@NLN, который подходит – kittu

Done .. Вот [plunkr] (HTTP://plnkr.co/edit/taYmWHzGHf6uVEfYKn5Q?p=preview) – nalinc

Угловые позволяют ориентироваться на конкретные ошибки. В этом случае вы можете использовать недопустимую ошибку шаблона:

<span style="color:red" ng-show="myForm.pin.$error.pattern">Only number are allowed</span>

Таким образом, он будет отображаться только тогда, когда ошибка в проверке шаблона.

См this JSFIDDLE

источник

2015-06-12 07:56:54 devqon

Если я хочу поместить ограничения на несколько полей ввода, тогда мне нужно иметь несколько контроллеров с шаблонами регулярных выражений? – kittu

Если вам нужно применить шаблон к нескольким входам на разных представлениях, вы должны создать для него директиву, которую можно использовать повторно каждый раз. – devqon

Шаблон ошибки для имени не работает. Создал plunkr http://plnkr.co/edit/ywsZPrAtCv0cEak4Tocy?p=preview – kittu

Вы можете использовать $ error.pattern на форме, чтобы отобразить конкретное сообщение об ошибке

<span style="color:red" ng-show="myForm.pin.$error.pattern">Invalid Input</span>

Ниже приведены некоторые другие примеры $ ошибки

myForm.useremail.$error.email ==true 
    // When useremail field does not contain a real email. 
myForm.username.$error.require ==true 
    // Only if the username field is left blank.

Вот plunkr

источник

2015-06-12 08:04:50 nalinc

Когда я использую $ error.pattern, это означает, что мне нужно иметь шаблон, объявленный в контроллере? – kittu

Не обязательно. Вы просто используете 'ng-pattern' в одном из ваших элементов формы. Вы можете сами предоставить свое регулярное выражение (вместо написания в контроллере). Подобно '' – nalinc

Итак, если я хочу ограничить пробелы следующим образом: 'ng-pattern ="^\ d + $/\/[^ \ s *]/"", то я включаю это регулярное выражение в каждый тег строки ввода? – kittu

angular.module('myApp',[]).controller('myFormController',['$scope',function($scope){ 
 
    $scope.myInputVal=''; 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<html> 
 
    <body ng-app="myApp"> 
 
    <div ng-controller="myFormController"> 
 
    <form name="myForm" > 
 
    <input type="text" ng-model="myInputVal" ng-pattern="/^[0-9]*$/" name="myInputVal"/> 
 
    <span ng-show="myForm.myInputVal.$error.pattern">Only Numbers are allowed</span> 
 
    <span ng-show="!myForm.myInputVal.$error.pattern">{{myInputVal}}</span> 
 
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
 
    </form> 
 
    </div> 
 
    </body>

источник

2017-07-06 11:26:16

Отображение сообщения об ошибке для неверного ввода

ответ

Смежные вопросы