title: Angular 7 button submit refresh the page
body: <p>Good day.</p>
  
  <p>I am following this tutorial</p>
  
  <pre><code>https://www.tutsmake.com/new-angular-7-upload-file-image-example/
  </code></pre>
  
  <p>Which will upload a file</p>
  
  <p>i Created a <code>fileupload</code> component</p>
  
  <p>modified the <code>app.module.ts</code> file</p>
  
  <pre><code>import { HttpClientModule } from '@angular/common/http';
  
  
  imports: [
        BrowserModule,
        AppRoutingModule,
        RouterModule.forRoot(appRoutes),
        HttpClientModule
     ],
  </code></pre>
  
  <p>As of now this is the code for the <code>fileupload.component.ts</code></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-fileupload',
    templateUrl: './fileupload.component.html',
    styleUrls: ['./fileupload.component.css']
  })
  export class FileuploadComponent implements OnInit {
    fileData: File = null;
    constructor(private http: HttpClient) { }
  
    ngOnInit() {
    }
  
    onSubmit() {
      console.log('Called');
    }
  
  }
  </code></pre>
  
  <p>And this is my <code>fileupload.component.htnl</code></p>
  
  <pre><code>&lt;form (ngSubmit)="onSubmit()"&gt;
    &lt;div class="form-group"&gt;
        &lt;input type="file" name="image"  /&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;button class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But why does the <code>onSubmit()</code> is not called?</p>
  
  <p>When i press the submit button. The website refresh it self. And the command is not called. In the console of the chrome browser. It didn't even log the <code>'Called'</code> It didn't even have an error. So im really confused why does it doesn't call the function</p>
  
  <p>I tried this and it still refresh the page</p>
  
  <pre><code>&lt;form ngForm (ngSubmit)="onSubmit()"&gt;
    &lt;div&gt;
        &lt;input type="file" name="image"  /&gt;
    &lt;/div&gt;
    &lt;div &gt;
        &lt;button class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And if i use this</p>
  
  <pre><code>&lt;form [formGroup]="formGroup" (ngSubmit)="onSubmit()"&gt;
    &lt;div&gt;
        &lt;input type="file" name="image"  /&gt;
    &lt;/div&gt;
    &lt;div &gt;
        &lt;button class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I received an error like this</p>
  
  <pre><code>Can't bind to 'formGroup' since it isn't a known property of 'form'.
  </code></pre>
  
  <p>How to i properly solve this?</p>
  
  <p>Thank you</p>