title: Angular form undefined
body: <p>I am trying to put form validation but I am getting form element is undefined. If I remove app-root element from index.html, it starts working as per expectation.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;NKZ Technologies&lt;/title&gt;
      &lt;base href="/"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;script type="script" src="../node_modules/angular/angular.min.js"&gt; 
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form name="myForm"&gt;
            Valid = {{myForm.$valid}}
          ̶&lt;̶/̶f̶o̶r̶m̶&gt;̶
           &lt;app-root&gt;&lt;/app-root&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks,
  Ankit</p>
  
  <hr>
  
  <p>@georgeawg your suggestion works for me but only in <code>index.html</code>. </p>
  
  <p>Now <code>app-root</code> element renders <code>app.component</code>. I am having same form <code>undefine</code> issue in app.component.html. </p>
  
  <pre><code>&lt;div id="main-content"&gt;
    &lt;form name="test"&gt;
        a = {{test.$valid}} 
    &lt;/form&gt; 
  &lt;/div&gt; 
  </code></pre>