Angular JS ng-Messages 不显示错误消息答案

【问题标题】：Angular JS ng-Messages not displaying error messagesAngular JS ng-Messages 不显示错误消息
【发布时间】：2016-08-22 15:17:44
【问题描述】：

我是使用 Angular JS 进行表单验证的新手，所以我环顾四周，发现一个很好的教程。教程可以在here找到。我知道 Stack Overflow 上有一些关于 ng-messages 的帖子，但是我查看了它们，它们似乎与我的问题无关。

我已经使用 bower 安装了 ng-messages，并正在使用 grunt 运行它。没有错误，但是我的验证消息似乎没有触发。

我的 HTML 如下：

<form name="myForm" novalidate>
  <fieldset>

    <div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
      <label for="client">SRF #: *</label>
      <input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
      <div ng-messages="myForm.clientNumber.$error">
        <!--<div ng-message="required" >SRF # is required.</div>-->
        <div ng-message="minlength" >SRF Number is too short.</div>
        <!--<div ng-message="maxlength">SRF Number is too long.</div>-->
       </div>
     </div>
   </fieldset>
</form>

我的部分app.JS如下：

angular
  .module('myApp', [
  // Angular
  'ngAnimate',
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngTouch',
  'ui.router',
  'myApp.home',
  'restangular',
  'ngMessages'
])

我的部分控制器如下：

(function() {
  'use strict';
  angular.module('myApp.home', [
  'ui.router',
  'myApp.myFactory',
  'ngMessages'
])
.config(homeConfig)
.controller('homeCtrl', home);

homeConfig.$inject = ['$stateProvider'];
home.$inject = ['$http','myFactory','$timeout'];

function home($http,myFactory,$timeout) {
  ...
}

我看过并尝试过的：

列表中有些是教程，有些是 Stack Overflow 上的帖子：ngMessages/angular validation not working。

我不明白为什么它不起作用。我见过的所有网站看起来都以相同的方式实施。

【问题讨论】：

在您的 html 代码中没有提及您可以显示 ngMessage 的事件。检查此 SO Answer
它需要一个 ng-submit 函数或者它不会消失？
我把它放进去但它不起作用，我举个例子。我尝试了我的 ng-click 方法，但该功能将不再触发
你检查plunker吗？

标签： angularjs validation gruntjs bower ng-messages

【解决方案1】：

我们需要做的就是将ng-model 添加到我们的输入中。

ngModel 指令使用 NgModelController 将输入、选择、文本区域（或自定义表单控件）绑定到范围上的属性，该属性由该指令创建和公开。

简而言之，在<input> 元素上没有ng-model Angular 并不关心它。

看看下面的工作 sn-p。

<!DOCTYPE html>
<html lang="en">

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

    <script>
      var app = angular.module('app', ['ngMessages']);
      app.controller('RegistrationScreenController',  function() {});
    </script>
    
  </head>

  <body ng-app="app" ng-controller="RegistrationScreenController">
    
    <form name="myForm" novalidate>
      <fieldset>
        <div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
          <label for="client">SRF #: *</label>
          <input type="text" ng-model="clientNumber" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
          <div ng-messages="myForm.clientNumber.$error">
            <div ng-message="required" >SRF # is required.</div>
            <div ng-message="minlength" >SRF Number is too short.</div>
            <div ng-message="maxlength">SRF Number is too long.</div>
          </div>
        </div>
      </fieldset>
    </form>
  </body>

</html>

【讨论】：

我会尝试，但是为什么我们需要 ng-model 才能工作？您能否为您的答案添加解释。谢谢
嘿，它有效，谢谢:) 我不知道它需要它。请在您的答案中添加任何解释。
酷！很高兴它有帮助。将更新解释。

【解决方案2】：

# From what i can see, you are missing 'when=required' in your 'ng-message' 
# This should fix it. Refer to examples below.
# 1) Using 'ng-messages'
# 2) Using 'ng-show'

//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-message' to show the error message

<form name="editUserForm">
    <div flex layout="row">
        <md-input-container flex="100">
            <label for="firstName">First Name</label>
            <md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon>
            <input id="firstNameEditUser" 
                label="firstName" 
                name="firstName" 
                type="text" 
                ng-model="vm.contact.firstName"
                required/>
            <div ng-messages="editUserForm.firstName.$error">
                <div ng-message when="required"><span translate>Please enter your First Name</span></div>
            </div>
        </md-input-container>
    </div>
</form>

//---------------------------------------------------------------------------------------------------------------


//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-show' to hide and show the error
# messages

<form name="changePasswordForm">
    <md-input-container class="md-block">
        <label for="password">Password</label>
        <input id="password"
            label="password"
            name="password"
            type="password"
            ng-model="vm.user.password"
            required/>
            <div class="validation-messages-error">
                <div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.minlength">
                    <span>Password is too short</span>
                </div>
                <div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.maxlength">
                      <span>Password is too long</span>
                </div>
                <div ng-show="changePasswordForm.password.$error.required">
                      <span>Password required</span>
                </div>
            </div>
    </md-input-container>
</form>


//---------------------------------------------------------------------------------------------------------------
# CSS Class

.validation-messages-error {
  font-size: 12px;
  color: #dd2c00;
  margin: 10px 0 0 25px;
}

//---------------------------------------------------------------------------------------------------------------

【讨论】：