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

Question

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

L1g*_*ira 3 validation angularjs gruntjs bower ng-messages

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

我已经ng-messages使用 bower安装并使用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>

Run Code Online (Sandbox Code Playgroud)

我的 app.JS 的一部分如下：

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

Run Code Online (Sandbox Code Playgroud)

我的控制器的一部分如下：

(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) {
  ...
}

Run Code Online (Sandbox Code Playgroud)

我看过并尝试过的内容：

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

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

Answer 1

oKo*_*nyk 5

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

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

总之，没有ng-model对<input>元素角不关心它。

看看下面的工作片段。

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	3988 次
最近记录：	7 年，5 月前