Проверка привязки AngularJS с помощью ng-messges

Question

Я делаю проверку selectbox с помощью ng-messages, но я не могу выполнить требуемую проверку.

В чем может быть проблема с моим кодом?

<form name="personalDetailForm" novalidate=""> 
    <label class="item item-input" ng-class="{ 'has-errors' : personalDetailForm.title.$invalid, 'no-errors' : personalDetailForm.title.$valid}"> 
     <span class="input-label">Title:</span> 
     <select data-ng-model="personalDetObj.title" ng-required="true" name="title"> 
      <option value="">Select title</option> 
      <option value="Mr">Mr.</option> 
      <option value="Mrs">Mrs.</option> 
     </select>     
    </label>  
    <div class="error-container" ng-show="personalDetailForm.title.$dirty && personalDetailForm.title.$invalid" ng-messages="personalDetailForm.title.$error"> 
     <div class="error" ng-message="required"> 
      This field is required! 
     </div> 
    </div> 
</form> 

Answer 1

часть отвечает за показ сообщений должен быть изменен на:

<div class="error-container" 
    ng-show="personalDetailForm.title.$dirty && personalDetailForm.title.$invalid" 
    ng-messages="personalDetailForm.title.$error"> 
    <div class="error" ng-message="required">This field is required!</div> 
</div> 

Обратите внимание на правильное использование ngMessages, ngMessage директив и personalDetailForm.title.$error выражения (не $errors).

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script> 
 

 
<form ng-app="demo" name="personalDetailForm" novalidate=""> 
 
    <label class="item item-input" ng-class="{'has-errors' : personalDetailForm.title.$invalid, 'no-errors' : personalDetailForm.title.$valid}"> 
 
     <span class="input-label">Title:</span> 
 
     <select data-ng-model="personalDetObj.title" ng-required="true" name="title"> 
 
      <option value="">Select title</option> 
 
      <option value="Mr">Mr.</option> 
 
      <option value="Mrs">Mrs.</option> 
 
     </select> 
 
    </label> 
 
    <div class="error-container" ng-show="personalDetailForm.title.$dirty && personalDetailForm.title.$invalid" ng-messages="personalDetailForm.title.$error"> 
 
     <div class="error" ng-message="required">This field is required!</div> 
 
    </div> 
 
</form>