title: How to use Material Design Lite and Angular for forms
body: <p>*Disclaimer: this question is not about using material design in an angular app but using material design <strong><em>lite</em></strong> inside a form. So, please, don't answer I should rather use angular material, materialize, lumx, material bootstrap, or daemonite... I know, they exist.*</p>
  
  <p>With Angular a typical form field for a name would be:</p>
  
  <pre><code>&lt;form name="myForm"&gt;
    &lt;label&gt;
    Enter your name:
      &lt;input type="text"
          name="myName"
          ng-model="name"
          ng-minlength="5"
          ng-maxlength="20"
          required /&gt;
    &lt;/label&gt;
    &lt;div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"&gt;
      &lt;div ng-message="required"&gt;You did not enter a field&lt;/div&gt;
      &lt;div ng-message="minlength"&gt;Your field is too short&lt;/div&gt;
      &lt;div ng-message="maxlength"&gt;Your field is too long&lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>With Material Design Lite, it would be something like that:</p>
  
  <pre><code>&lt;form action="#"&gt;
    &lt;div class="mdl-textfield mdl-js-textfield"&gt;
       &lt;input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*" /&gt;
       &lt;label class="mdl-textfield__label" for="user"&gt;User name&lt;/label&gt;
       &lt;span class="mdl-textfield__error"&gt;Letters and spaces only&lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Question:</strong> how is it possible to use the angular validation functionality combined with ngMessage (for multiple error messages) with the Material Design Lite?</p>