Angular 7 button submit refresh the page

Question

Good day.

I am following this tutorial

https://www.tutsmake.com/new-angular-7-upload-file-image-example/

Which will upload a file

i Created a fileupload component

modified the app.module.ts file

import { HttpClientModule } from '@angular/common/http';


imports: [
      BrowserModule,
      AppRoutingModule,
      RouterModule.forRoot(appRoutes),
      HttpClientModule
   ],

As of now this is the code for the fileupload.component.ts

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');
  }

}

And this is my fileupload.component.htnl

<form (ngSubmit)="onSubmit()">
  <div class="form-group">
      <input type="file" name="image"  />
  </div>
  <div class="form-group">
      <button class="btn btn-primary">Submit</button>
  </div>
</form>

But why does the onSubmit() is not called?

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 'Called' It didn't even have an error. So im really confused why does it doesn't call the function

I tried this and it still refresh the page

<form ngForm (ngSubmit)="onSubmit()">
  <div>
      <input type="file" name="image"  />
  </div>
  <div >
      <button class="btn btn-primary">Submit</button>
  </div>
</form>

And if i use this

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div>
      <input type="file" name="image"  />
  </div>
  <div >
      <button class="btn btn-primary">Submit</button>
  </div>
</form>

I received an error like this

Can't bind to 'formGroup' since it isn't a known property of 'form'.

How to i properly solve this?

Thank you

Solution

You've asked me to post my comment as an answer.

https://stackblitz.com/edit/angular-97w8fo?file=src%2Fapp%2Fapp.component.ts

I guess you lack of imported FormsModule for [ngForm] or ReactiveFormsModule for [formGroup].

Actually it's enough to just import FormsModule and this will automatically add ngForm to your <form> thus enabling (ngSubmit) event availability on <form>

Comments

[Sergey]

You have to add or [ngForm] directive or [formGroup] directive. Only those provide event called ngSubmit

[Sergey]

Any errors in console? It should work stackblitz.com/edit/…

[Sergey]

If there is any outer form around your fileuploadComponent it may be called. Therefore, if this outer form has an action="" it will refresh page

[mecocopy]

I updated the question. And kindly help me solve the problem

[mecocopy]

@Sergey can you please post your comment as answer. Thank you for the link

[emix]

type="submit" is a default attribute - if the button has no type, it has type="submit" set implicitly.

[Sumit Vekariya]

Yes I missed that point, With your updated question Can't bind to 'formGroup' since it isn't a known property of 'form': You need to initialise the form first with the formControls and bind them, follow this for more details: angular.io/guide/…

[mecocopy]

Actually the link you provided really help me. I checked the code and see whats is missing with mine. Thank you so much