Why doesn't my ng-message appear?

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>

controller

(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!' });
      }
    }
  }
}());

SITUATION:

When I click submit with an empty textarea, the error message "min: 1400 characters max: 14000 characters" does not appear.

Currently using mean.js and customising it to learn the MEAN stack.

HOW TO REPRODUCE:

Download mean.js: https://github.com/meanjs/mean

File is the following: modules/articles/client/views/admin/form-article.client.view.html

did you inject `ngMessages` in app? Create a demo that reproduces problem — charlietfl, Feb 03 '17 at 14:09
Can you try to write it like that:
and
Btw you have a typo (articleForm, articleForms) — Groben, Feb 03 '17 at 14:09
@Groben Thanks for the typo. Let me try what you are suggesting. — Coder1000, Feb 03 '17 at 14:11
@charlietfl There is no need for demo, you can download mean.js here: https://github.com/meanjs/mean — Coder1000, Feb 03 '17 at 14:11
@Coder1000 that doesn't provide a public link that makes your example available to fork. Only takes a couple of minutes to set one up in plunker — charlietfl, Feb 03 '17 at 14:13
@charlietfl Sadly, in my case it will be impossible to reproduce in Plunker, I have edited my question with "how to reproduce" though. — Coder1000, Feb 03 '17 at 14:16
Impossible? Huh? No it's not, copy paste the html and js and make sure all dependencies are included. remove any irrelevant code not specific to problem — charlietfl, Feb 03 '17 at 14:18
@charlietfl Have a look at mean.js and you will see what I mean. I am still learning angular. This is a side-project to learn the framework. — Coder1000, Feb 03 '17 at 14:19
@charlietfl Hello, would you have any idea of what is causing this ? Also: this question now has a 50 rep bounty on it. — Coder1000, Feb 05 '17 at 18:34
@charlietfl Here it is: https://plnkr.co/edit/AuFd1pXegeBD3dPkVz33?p=preview But something appears to be missing although I added angular :/ — Coder1000, Feb 05 '17 at 19:21
Code shown in question is not angular 2. Also need to include ngMessages script — charlietfl, Feb 05 '17 at 19:30
@charlietfl Either there is no ngMessages script or I don't know where to find it in mean.js I changed the angular script — Coder1000, Feb 05 '17 at 19:42
Modules not created properly and not injecting ngMessages and need to use compatible versions. Check errors in console — charlietfl, Feb 05 '17 at 19:57
@charlietfl I do not know how to reproduce my problem in plunker because the file hierarchy of mean.js is rather complex... It would be much simpler to just download the zip file. https://github.com/meanjs/mean — Coder1000, Feb 05 '17 at 20:04
Nobody here will download and do an install just to help you with an issue that can be demonstrated in a public sandbox. We would also have no idea what changes in config you have done — charlietfl, Feb 05 '17 at 20:05
@charlietfl I have actually had quite a few people do just that for me on SO and help me solve my issue. Maybe you'll be the first one who won't :D What about #SOreadytohelp ? — Coder1000, Feb 05 '17 at 20:07
@charlietfl I really don't see how to reproduce this in plunker. — Coder1000, Feb 05 '17 at 20:07
Well that certainly isn't the norm. Your whole problem is front end related and would have nothing to do with the M,E,or N in MEAN — charlietfl, Feb 05 '17 at 20:08
@charlietfl I am not certain of that. There is some server validation. On another note, I don't think you need to do an install, viewing the files on github would also work. — Coder1000, Feb 05 '17 at 20:10
But that validation can be replicated easily in a demo. Up to you, I'm just telling you that whatever your issue is should be easy to create a [mcve] demo for — charlietfl, Feb 05 '17 at 20:10

Robert Leggett · Accepted Answer · 2017-02-06T05:27:52.403

1

You need to add the message type for maxlength validation.

Currently a message will only be displayed when you don't have any text because of the required flag, but once you hit max length you wont see the message.

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

Add the following for a message.

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

Your error message is also confusing as you have not set a minlength but specifying a min length error message.

If you are still having issues try to change it from ng-maxlength="14000" to just maxlength="14000" and also ensure you have ngMessages injected correctly into your application.

edited Feb 06 '17 at 05:27

answered Feb 06 '17 at 05:22

Robert Leggett

972
1
8
23

The issue is actually that I don't see any message when there is NO text :/ – Coder1000 Feb 06 '17 at 10:45
I don't have minlength because of this issue: http://stackoverflow.com/questions/42023145/how-to-create-a-character-counter-for-textarea-angular `minlength` intereferes with `ng-model`. – Coder1000 Feb 06 '17 at 10:47
It's fine actually, I moved my validation to the server :) – Coder1000 Feb 06 '17 at 11:02
The server should always have the validation anyways since front end validation can always be bypassed, if I can think in anything else you may be missing I'll update via a comment. – Robert Leggett Feb 06 '17 at 20:38
Try the following examples from here: https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages and https://www.sitepoint.com/easy-form-validation-angularjs-ngmessages/ – Robert Leggett Feb 06 '17 at 20:43

Why doesn't my ng-message appear?

1 Answers1