Question

CODE：

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

您需要为maxlength validation添加消息类型。

目前只有当您因为必需的标志而没有任何文本时才会显示一条消息，但是一旦达到最大长度，您将看不到该消息。

<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没有出现？

1 个答案: