title: Angular Forms, ng-valid is always present
body: <p>In the angular form tutorial there is a use of &quot;ng-valid&quot; to indicate when the name text box in the component is not empty.</p>
  <p>(Tutorial: <a href="https://angular.io/guide/forms" rel="nofollow noreferrer">https://angular.io/guide/forms</a>)</p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control ng-untouched ng-pristine ng-valid&quot; id=&quot;name&quot;
           required
           [(ngModel)]=&quot;model.name&quot; name=&quot;name&quot;&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>We add a forms.css file with the following content:</p>
  <pre><code>.ng-valid[required], .ng-valid.required  {
    border-left: 5px solid #42A948; /* green */
  }
  
  .ng-invalid:not(form)  {
    border-left: 5px solid #a94442; /* red */
  }
  </code></pre>
  <p>And a reference in the index.js file of the app:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;AngularHeroForm&lt;/title&gt;
    &lt;base href=&quot;/&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/forms.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>According to the tutorial, when erasing the content of &quot;name&quot; the ng-valid should disappear and <code>ng-invalid</code> should appear in its place.</p>
  <p>What I am seeing is that <code>ng-valid</code> stays and <code>ng-invalid</code> just added to the end of the class name.</p>
  <p>This behavior causes angular to not apply the correct (red color) style from the <code>forms.css</code> file because ng-valid is still in the class name.</p>
  <p>What did I do wrong and why <code>ng-valid</code> is not disappearing after erasing the name ?</p>