title: Angular form is undefined when submitting via ngSubmit
body: <p>I have a form outlined in my app.component.html file as below, when I click the Send button to submit the form I get an error in my Javascript saying that the chatForm is undefined. </p>
  
  <p>I've had a look at a few different tutorials and I can't seem to find why this function is not operating as I expect. What am I doing wrong? </p>
  
  <p>Also when I'm submitting the form how do I get the value of the input that is present in my form? I have a name of <code>message</code> defined on the form, how can I use this variable?</p>
  
  <p>app.component.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;h2&gt;Message Form&lt;/h2&gt;
      &lt;form (ngSubmit)="sendMessage(chatForm)" #chatForm="ngForm"&gt;
          &lt;div&gt;
              &lt;label for="message"&gt;Message&lt;/label&gt;
              &lt;input type="text" id="message" name="message" [(ngModel)]="message" required&gt;
          &lt;/div&gt;
          &lt;button type="submit" id="sendmessage" [disabled]="!chatForm.valid"&gt;
              Send
          &lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>public sendMessage(form): void {
      console.log("Message sent: " + form.value);
  }
  </code></pre>