angularjs | form validation | ngMessages not displaying error message

Question

I am able to get error, like field is becoming red, showing character count is becoming red. But error messages not showing . No error found in console. I have added angular-1.3.4 ngMessages dependency also. Please help.

<div class="col-md-3 col-sm-6 col-xs-12">
<md-input-container flex>
          <label>{{field.field_title}}</label>
          <input ng-model="field.field_value" name="username" type="text" placeholder="Placeholder text"  
            ng-required="field.field_required" md-maxlength="field.max" >

     <div ng-messages="userForm.username.$error">

        <p ng-message="maxlength">Your name is too long.</p>
        <p ng-message="required">Your name is required.</p>
    </div>
 </md-input-container>
</div>

Answer 1

Keep these attributes of input field simple :

ng-minlength=3 ng-maxlength=20 required

This is my working code for validations :

<form name="signup_form" novalidate ng-submit="signupForm()">
  <fieldset>
    <legend>Signup</legend>
    <div class="row">
      <div class="large-12 columns">
        <label>Your name</label>
        <input type="text" 
            placeholder="Name" 
            name="name" 
            ng-model="signup.name" 
            ng-minlength=3 
            ng-maxlength=20 required />
       <div class="error-container" 
            ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
        <small class="error" 
            ng-show="signup_form.name.$error.required">
            Your name is required.
        </small>
        <small class="error" 
                ng-show="signup_form.name.$error.minlength">
                Your name is required to be at least 3 characters
        </small>
        <small class="error" 
                ng-show="signup_form.name.$error.maxlength">
                Your name cannot be longer than 20 characters
        </small>
      </div>
      </div>
    </div>
    <button type="submit" class="button radius">Submit</button>
  </fieldset>
</form>