AngularJs ng-сообщения не работают должным образом

Я пытаюсь выполнить проверку с помощью ng-сообщений в AngularJs 1.6.4.

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

<form name="userForm" ng-submit="signup(userForm.$valid)" novalidate>

    <!-- First name -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid }">

      <label for="example-text-input" class="col-2 col-form-label">First Name</label>
      <div class="col-10">

        <input class="form-control" type="text" placeholder="Please enter your first name"
            name="first_name"
            ng-model="user.first_name"
            ng-minlength="2"
            ng-maxlength="25"
            required>

        <div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_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>
</form>

ИЗМЕНИТЬ

Решил это, добавив ngMessages в мои модули и добавив тег скрипта в мой index.html.


javascript html angularjs ng-messages
person Soundwave    schedule 22.04.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Ваш код работает для меня отлично. проверьте ссылку plunker

Вставьте ngmessage в нужный модуль.

angular.module('app', ['ngMessages'])

добавьте файл сообщения angular в свой проект.

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular‌​-messages.js"></scri‌​pt>
person Upal Roy    schedule 22.04.2017
comment
Это действительно странно, потому что это не работает в моем проекте. - person Soundwave; 22.04.2017
comment
Я не сделал, теперь я сделал, но теперь все перестает работать. Теперь angular не загружается должным образом. - person Soundwave; 22.04.2017
comment
Заработало, добавив ссылку ngMessages в мой файл index.html и добавив ngMessages в мои модули. Спасибо. - person Soundwave; 22.04.2017
comment
добавить файл сообщения angular в свой проект <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script> - person Upal Roy; 22.04.2017

arrow_upward
0
arrow_downward 

                 <input class="form-control" type="text" placeholder="Please enter your first name"
        name="first_name"
        ng-model="user.first_name"
        minlength="2"
        maxlength="25"
        ng-required="true"/>

                 <div ng-messages="userForm.first_name.$error" ng-show="userForm.first_name.$touched" >
                    <span ng-message="required"  class="error">Required</span>
                    <span ng-message="minlength">Minimum 2</span>

Максимум 25

                 </div>
person twitch    schedule 22.04.2017