为什么我的 ng-message 没有出现？

Question

代码：

view.html

<form name="vm.form.articleForm" class="form-horizontal" ng-submit="vm.save(vm.form.articleForm.$valid)" novalidate>
  <fieldset>
    <div class="form-group" show-errors>
      <label class="control-label" for="title">Title</label>
      <input name="title" type="text" ng-model="vm.article.title" id="title" class="form-control" placeholder="Title" required autofocus>
      <div ng-messages="vm.form.articleForm.title.$error" role="alert">
        <p class="help-block error-text" ng-message="required">Article title is required.</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label" for="content">Content</label>
      <textarea name="content" data-ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Min: 1400 characters. Max: 14000 characters." required  ng-maxlength="14000" highlight-on-error></textarea>
        <!--counter-->
      <br>
      <span class="form-help">{{vm.article.content.length}} Characters</span>
      <div ng-messages="vm.form.articleForm.content.$error" role="alert">
        <p class="help-block error-text" ng-message="required">min: 1400 characters max: 14000</p>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
    </div>
  </fieldset>
</form>

控制器

(function () {
  'use strict';

  angular
    .module('articles')
    .controller('ArticlesCreateController', ArticlesCreateController);

  ArticlesCreateController.$inject = ['$scope', '$state', '$window', 'articleResolve', 'Authentication', 'Notification'];

  function ArticlesCreateController($scope, $state, $window, article, Authentication, Notification) {
    var vm = this;

    vm.article = article;
    vm.authentication = Authentication;
    vm.form = {};
    vm.remove = remove;
    vm.save = save;

    // Remove existing Article
    function remove() {
      if ($window.confirm('Are you sure you want to delete?')) {
        vm.article.$remove(function() {
          $state.go('articles.list');
          Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Article deleted successfully!' });
        });
      }
    }

    // Save Article
    function save(isValid) {
      if (!isValid) {
        $scope.$broadcast('show-errors-check-validity', 'vm.form.articleForm');
        return false;
      }

      // Create a new article, or update the current instance
      vm.article.createOrUpdate()
        .then(successCallback)
        .catch(errorCallback);

      function successCallback(res) {
        $state.go('articles.list'); // should we send the User to the list or the updated Article's view?
        Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Article saved successfully!' });
      }

      function errorCallback(res) {
        Notification.error({ message: res.data.message, title: '<i class="glyphicon glyphicon-remove"></i> Article save error!' });
      }
    }
  }
}());

情况：

当我单击空 textarea 提交时，不会出现错误消息 "min: 1400 characters max: 14000 characters"。

目前正在使用 mean.js 并对其进行自定义以学习 MEAN 堆栈。

如何复制：

下载mean.js：https://github.com/meanjs/mean

文件如下：modules/articles/client/views/admin/form-article.client.view.html

Answer 1

您需要为最大长度验证添加消息类型。

目前，由于需要标志，只有在您没有任何文本时才会显示一条消息，但是一旦您达到最大长度，您将不会看到该消息。

<div ng-messages="vm.form.articleForm.content.$error" role="alert">
        <p class="help-block error-text" ng-message="required">min: 1400 characters max: 14000</p>
</div>

为消息添加以下内容。

<div ng-messages="vm.form.articleForm.content.$error" role="alert">
        <p class="help-block error-text" ng-message="required">min: 1400 characters max: 14000</p>
        <p class="help-block error-text" ng-message="maxlength">min: 1400 characters max: 14000</p>
      </div>

您的错误消息也令人困惑，因为您没有设置最小长度但指定了最小长度错误消息。

如果您仍然遇到问题，请尝试将其从 ng-maxlength="14000" 更改为 maxlength="14000"，并确保您已将 ngMessages 正确注入到您的应用程序中。

为什么我的 ng-message 没有出现？

Why doesn't my ng-message appear?

javascript

forms

angularjs

mean-stack

ng-messages