AngularJS NgMessages не скроет сообщения

Я новичок в AngularJS, так что это может быть довольно глупый вопрос.AngularJS NgMessages не скроет сообщения

Используя Angular documentation on ngMessages, я хотел бы реализовать окна сообщений, которые отображаются при выполнении определенных требований.

Однако, даже при использовании примера с копированием, окна сообщений не скрываются, даже если их требования не выполняются. Однако переменная $error показывает правильные значения.

angular.module('ngMessagesExample', ['ngMessages']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> 
 
<form name="myForm"> 
 
    <label> 
 
     Enter your name: 
 
     <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required /> 
 
    </label> 
 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 
 

 
    <ng-messages for="myForm.myName.$error" style="color:maroon;" role="alert"> 
 
     <ng-message when="required">You did not enter a field</ng-message> 
 
     <ng-message when="minlength">Your field is too short</ng-message> 
 
     <ng-message when="maxlength">Your field is too long</ng-message> 
 
    </ng-messages> 
 
</form>

Это то, что он выглядит следующим образом:

источник

2015-12-03 Rebecca

Вот альтернативное решение для вашей проблемы.

<p ng-if="myForm.myName.$error.minlength">Your field is too short.</p> 
<p ng-if="myForm.myName.$error.maxlength">Your field is too long.</p> 
<p ng-if="myForm.myName.$error.required">You did not enter a field.</p>

источник

2015-12-03 12:25:12

Это даже лучше, чем проблема работы с ngmessages (в моем случае) Большое вам спасибо! – Rebecca

Как это хорошее решение? Весь смысл 'ng-messages' заключается в том, чтобы избежать этих длинных и уродливых выражений внутри' ng-if' или 'ng-show'. – ataravati

<div ng-if="myForm.myName.$touched" for="myName" ng-messages="myForm.myName.$error" style="color:maroon;" role="alert"> 
     <ng-message="required">You did not enter a field</ng-message> 
     <ng-message="minlength">Your field is too short</ng-message> 
     <ng-message="maxlength">Your field is too long</ng-message> 
    </div>

Удалить when из вашего кода.

источник

2015-12-03 10:37:16 Ricky

К сожалению, все сообщения по-прежнему отображается сразу (как только вход был тронут) – Rebecca

Я также попытался это с помощью ''

You did not enter a field

вместо нг-сообщений (без 'when') Это похоже, один и тот же (хорошо один атрибут директивы, а другой - элемент, но все же ...) Благодарим вас за ответ – Rebecca

Ваш код в порядке, мне кажется, вам просто нужно было импортировать модуль ngMessages отдельно. (Вы проверили консоль на наличие ошибок?)

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

<body ng-controller="MainCtrl"> 
<form name="myForm"> 
    <label> 
    Enter your name: 
    <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required /> 
    </label> 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 

    <ng-messages for="myForm.myName.$error" style="color:maroon;" role="alert"> 
    <ng-message when="required">You did not enter a field</ng-message> 
    <ng-message when="minlength">Your field is too short</ng-message> 
    <ng-message when="maxlength">Your field is too long</ng-message> 
    </ng-messages> 
</form> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.1/angular-messages.min.js"></script> 
<script src="app.js"></script>

Plunker

источник

2015-12-03 12:09:16 Shay

Благодарим вас за ответ! Я попытался прочитать angular-messages.js, но ничего не изменил - однако, я все еще чему-то научился благодаря вашему ответу! – Rebecca

AngularJS NgMessages не скроет сообщения

ответ

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