Angular 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()不调用呢？

当我按下提交按钮时。网站自行刷新。并且该命令未被调用。在chrome浏览器的控制台中。它甚至没有记录'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

我猜你缺少导入FormsModulefor[ngForm]或ReactiveFormsModulefor [formGroup]。

实际上，只需导入就足够了FormsModule，这将自动添加ngForm到您的帐户中<form>，从而启用(ngSubmit)事件可用性<form>