title: testing angular template driven forms
body: <p>I am using angular 5, always the <code>.controls</code> property of the form is empty.  Not sure why during testing angular doesn't create the form controls by reading the template file.</p>
  
  <p>Template file</p>
  
  <pre><code>&lt;form 
    #myForm="ngForm"
    novalidate&gt;
    &lt;input 
      #myCtrl
      required
      type="input" 
      name="myCtrl" 
      id="myCtrl"
      [(ngModel)]="value"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Component file</p>
  
  <p><code>@ViewChild('myForm') myForm: NgForm;</code></p>
  
  <p>In my tests, when I console.log the following, I get <code>{}</code></p>
  
  <p><code>fixture.debugElement.componentInstance.myForm.controls</code></p>
  
  <p>The form also has errors: <code>null</code> and status <code>VALID</code> despite the fact that the form should contain an invalid <code>FormControl</code>. Is it possible to unit test forms when they are configured with <code>ViewChild</code> rather than <code>FormBuilder</code>? Is there a way to do it with my <code>ViewChild</code> setup?</p>
  
  <p>or do we have to mock the form by creating the controls again using FormGroup and assign it to </p>
  
  <p><code>componentInstance.myForm.controls</code>?</p>