title: How do I create a fake NgForm object in an Angular unit test?
body: <p>I have a component with a template like the following:</p>
  
  <pre class="lang-html prettyprint-override"><code>// Template
  &lt;form #f="ngForm" (ngSubmit)="onFormSubmit(f)"&gt;
    &lt;!-- A bunch of form fields --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My component has a method like:</p>
  
  <pre class="lang-ts prettyprint-override"><code>onFormSubmit(form: NgForm) {
    this.save();
  }
  </code></pre>
  
  <p>I want to write a test that basically looks like this, testing that the save function gets called when the form is submitted:</p>
  
  <pre class="lang-ts prettyprint-override"><code>it('saves the widget when the form is submitted', () =&gt; {
    let testForm = new NgForm([], []);
    testForm.setValue({
      name: "Hello",
      category: "World"
    });
    component.onFormSubmit(testForm);
  
    // Run tests to check that the component data was updated
    expect(component.data.name).toEqual('Hello');
    expect(component.data.category).toEqual('World');
  });
  </code></pre>
  
  <p>How can I create a mock version of the form to pass in to the <code>onFormSubmit()</code> function? I have tried doing the above and I get the error: <code>"There are no form controls registered with this group yet.  If you're using ngModel, you may want to check next tick (e.g. use setTimeout)."</code></p>