NgMessages / angular check does not work

Question

I get neither the value emitted by the template fragment, nor the health check. My Jade Template:

doctype html html(lang='en', ng-app="Validate") head script(src='#{cdn_path}/angular.js/1.3.11/angular.js') script(src='#{cdn_path}/angular.js/1.3.11/angular-messages.js') script. angular.module('Validate', ['ngMessages']); body .container form(method="POST", action="/apply", name="myform", novalidate="") pre myform.name.$error = {{ myform.name.$error }} input.form-control(name="name", required="", pattern=".*[a-zA-Z].*", minlength=5) ng-messages(for="myform.name.$error") ng-message(when="required") Required! ng-message(when="min") Too small! input.btn(type='submit') 

HTML result: http://plnkr.co/edit/McyMXwW1b2Ae7kkwQ1sP

I would like to avoid custom directives or much as extra Javascript. What am I doing wrong?

Answer 1

This is because you did not bind the ng model to the input :-)

  <input name="name" ng-model="name" required="" pattern=".*[a-zA-Z].*" minlength="5" class="form-control"> <ng-messages for="myform.name.$error"> <ng-message when="minlength">Too small!</ng-message> <ng-message when="required">Required!</ng-message> 

Plunker: - http://plnkr.co/edit/kmNkfhdVOHQsstj6dpPT?p=preview

Answer 2

I just have the same problem and it was resolved. I want to share it, so no one will spend an hour like me.

Please ensure the following:

1. Download the ngMessages module

 <!-- Load Angular --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> <!-- Load ngMessages --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.min.js"></script> 

2. Introduce ngMessages into our application module

 angular.module( "app", [ "ngMessages" ] ); 

3. Try newer versions. For some reason, Doug Luce code only works by changing versions, for example, 4.11!