Угловые ошибки Входы

Question

У меня есть следующий вид:

 <form name="newCollectionForm" ng-submit="onSubmit()"> 
      <md-input-container class="md-block"> 
       <label>Name</label> 
       <input name="collection" 
         ng-model="new_collection_model" 
         ng-trim="true" 
         ng-minlength="3" 
         ng-maxlength="50" 
         md-maxlength="50" 
         required> 
       <div ng-messages="newCollectionForm.collection.$error"> 
        <div ng-message="required">You must supply a name for the Collection.</div> 
        <div ng-message="maxlength">The name must no contain more than 50 characters.</div> 
        <div ng-message="minlength">The name must be at least 3 characters.</div> 
       </div> 
      </md-input-container> 
     </form> 

Единственная проблема в том, что он не показывает сообщений об ошибке. Он показывает только состояние ошибки, но не показывает соответствующее сообщение.

Я пробовал много вариантов и не имел успеха.

Любая помощь?

Answer 1

Я создал плункер для вас.

https://plnkr.co/edit/MvFaXjseWt8ILRpsbftq?p=preview

вы должны сделать следующее, что нужно сделать ваш код работать.

1: введите ngMessages в ваш модуль.

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

2: включить этот js-файл в ваш код.

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

Надеюсь, это вам поможет.

Answer 2

Ну, по крайней мере, я мог бы показать сообщения сделать некоторые изменения:

 <form name="newCollectionForm" ng-submit="onSubmit()" novalidate> 
      <md-input-container class="md-block"> 
       <label>Name</label> 
       <input name="collection" 
         ng-model="new_collection_model" 
         ng-trim="true" 
         ng-minlength="3" 
         ng-maxlength="50" md-maxlength="50" required> 
       <div ng-show="newCollectionForm.collection.$error" role="alert"> 
        <div class="form_error" ng-show="newCollectionForm.collection.$error.required">You must supply a name for the Collection.</div> 
        <div class="form_error" ng-show="newCollectionForm.collection.$error.maxlength">The name must no contain more than 50 characters.</div> 
        <div class="form_error" ng-show="newCollectionForm.collection.$error.minlength">The name must be at least 3 characters.</div> 
       </div> 
      </md-input-container> 
     </form>