title: Angular material design valid/invalid input
body: <p>Couldn't seem to find a relative existing answer so..</p>
  
  <p>I am using angular material design and i'm creating a sign in/up form. At the moment when no text is entered into the field the label and bottom border turns red; this is the result of <code>ng-required="true"</code>.</p>
  
  <p>I would also like it to turn green when the information is valid, I am not amazingly familiar with angular so not sure if there is another directive I could use?</p>
  
  <p>Alternatively I assume some CSS would do the trick; In one of my CSS files there is -</p>
  
  <pre><code>.ng-invalid.ng-dirty {
      border-color: #FA787E; (red)
  
  }
  .ng-valid.ng-dirty {
      border-color: #78FA89; (green)
  
  }
  </code></pre>
  
  <p>These would be perfect but attached attaching the class does not seem to work (or im doing it wrong)</p>
  
  <p>Here is the code from one line of input </p>
  
  <pre><code>&lt;md-input-container&gt;
  
      &lt;label class="userlabel"&gt;Username&lt;/label&gt;
  
      &lt;input ng-model="credentials.username" type="text" ng-required="true" aria-label="password" class="inputtext ng-valid"&gt;
  
  &lt;/md-input-container&gt;
  </code></pre>
  
  <p>If anyone could assist that would be great, thanks in advance</p>