Question

美好的一天。

我正在关注本教程

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

将上传文件

i创建了一个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

我想您缺少针对openxlsx::write.xlsx(do.call("rbind",list(unlist(a))),"testme.xlsx")的{{1}}或FormsModule的{{1}}的导入。

实际上，仅导入[ngForm]就足够了，这会自动将ReactiveFormsModule添加到您的[formGroup]中，从而在FormsModule上启用ngForm事件可用性

Answer 2

尝试在按钮标签内使用type =“ submit”

maximumNumbersOfAnimal

Angular 7按钮提交刷新页面

2 个答案: