Угловая проверка поля

В моем проекте я хотел сделать проверку поля. Поэтому я нашел учебник, как это сделать. После учебника я получил этот код.Угловая проверка поля

var app = angular.module('RegistrationScreen', []); 
 

 
app.controller('RegistrationScreenController', function($scope, $http) { 
 
     $http({ 
 
     method: 'GET', 
 
     url: '/lt' 
 
     }).then(function successCallback(response) { 
 

 
     $scope.nameList = response.data.registrationNameTags; 
 
     $scope.topics = response.data.topicList; 
 
     $scope.bankDivisions = response.data.bankDivisionList; 
 

 
     document.title = response.data.registrationNameTags.title; 
 
      }); 
 

 
}); 
 
var applic = angular.module('app', ['ngMessages'])

<!DOCTYPE html> 
 
<html lang="en" ng-app="RegistrationScreen" > 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <style> 
 
     body { 
 
      padding-top: 60px; 
 
     } 
 
     textarea { resize:none; } 
 
    </style> 
 
    <script src="js/angular.min.js"></script> 
 
    <script src="//code.angularjs.org/1.4.0/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script> 
 
    <script src="js/registration.js"></script> 
 

 
</head> 
 
<body ng-app="applic" ng-controller="RegistrationScreenController as main"> 
 
     <div class="container"> 
 
      <h1>{{ nameList.header }}</h1> 
 
     </div> 
 

 
     <form name="nameForm" class="form-horizontal" novalidate> 
 
      <div class="center-block"> 
 
       <div class="form-group" ng-class="{ 'has-error': nameForm.name.$touched && nameForm.name.$invalid }"> 
 
        <label for="inputName" ng-model="inputName" class="col-xs-3 control-label">{{ nameList.name }}</label> 
 
        <div class="col-xs-5"> 
 
         <input type="text" name="name" class="form-control" id="inputName" 
 
           ng-model="main.name" 
 
           ng-minlength="5" 
 
           ng-maxlength="10" 
 
           required> 
 
         <div class="help-block" ng-messages="nameForm.name.$error" ng-if="nameForm.name.$touched"> 
 
          <p ng-message="minlength">Your name is too short.</p> 
 
          <p ng-message="maxlength">Your name is too long.</p> 
 
          <p ng-message="required">Your name is required.</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       </form> 
 
</body> 
 
</html>

Это должно написать «Ваше имя слишком коротка», если имя меньше 5 символов, «Ваше имя слишком длинное», если имя больше, чем 10 символов, «Ваше имя требуется ", если ничего не написано. И если я отвечаю требованиям, сообщение об ошибке должно исчезнуть. Теперь к проблеме. Проблема в том, что если я пишу имя, содержащее менее 5 символов, он все равно печатает все 3 сообщения об ошибках. И после этого, если я отвечаю требованиям, сообщения об ошибках не исчезают, вместо этого они просто меняют свой цвет на серый. Что я делаю не так? Вот два скриншота, как работает этот код.

источник

2016-02-15 Martin

У вас мало путаницы с модулями. Удалить ng-app="applic" атрибут и сделать единый RegistrationScreen модуль с ngMessages зависимостью:

var app = angular.module('RegistrationScreen', ['ngMessages']);

Тогда вам не нужно var applic = angular.module('app', ['ngMessages']);

источник

2016-02-15 21:00:11 dfsq

Это сработало !!! Огромное спасибо!!! Я весь день пытался это исправить! – Martin

Без проблем, рад, что это помогло. – dfsq

Не могли бы вы объяснить, почему из-за этого он не работал? – Martin

Угловая проверка поля

ответ

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