Угловая 7 кнопка отправки обновить страницу

Question

Добрый день.

Я следую этому уроку

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

Который будет загружать файл

я создал fileupload компонент

изменил файл app.module.ts

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


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

На данный момент это код для 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');
  }

}

А это мой 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>

Но почему onSubmit() не называется?

Когда я нажимаю кнопку отправки. Сайт обновляется сам. И команда не называется. В консоли браузера хром. Он даже не зарегистрировал 'Called'. Даже не было ошибки. Так что я действительно смущен, почему он не вызывает функцию

Я попробовал это, и он все еще обновляет страницу

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

И если я использую это

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

Я получил ошибку, подобную этой

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

Как мне правильно решить эту проблему?

Спасибо

Answer 1

Вы попросили меня опубликовать мой комментарий в качестве ответа.

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

Полагаю, вам не хватает импортированных FormsModule для [ngForm] или ReactiveFormsModule для [formGroup].

На самом деле достаточно просто импортировать FormsModule, и это автоматически добавит ngForm к вашему <form>, что позволит (ngSubmit) доступности события на <form>

Answer 2

Попробуйте использовать type = "submit" внутри тега кнопки, как этот

<button type="submit" class="btn btn-primary">Submit</button>