时间戳

首页 > 解决方案 > 动态表单提交重新加载页面而不是调用 ngSubmit 函数

javascript - 动态表单提交重新加载页面而不是调用 ngSubmit 函数

问题描述

我正在尝试从 ts 文件动态提交表单。

形式

<form [formGroup]="mainForm" #mainFormEle (Submit)="doNothing()">
.....
</form>

和 ts

  @ViewChild('mainFormEle',{static:false}) mainFormEle

  doNothing(){
    ..
    console.log('came in')
    ..
  }

  mainFunc(){
    ..
    this.mainFormEle.nativeElement.submit()
    ..
  }

但是上面的块在提交时重新加载页面。并且永远不会进入 doNothing()。还尝试了 (ngSubmit) 和 (onSubmit)

标签： javascriptangular8angular-formsangular-formbuilder

解决方案

我找到了解决方案。

  1. 引入了提交按钮。
  2. 而不是从 ts 提交表单，只是触发了按钮上的点击事件。
<button type="submit" #submitButton></button>

或者

<button type="submit" hidden #submitButton></button>

@ViewChild('submitButton',{static:false}) submitButton

  doNothing(){
    ..
    console.log('came in')
    ..
  }

  mainFunc(){
    ..
    this.submitButton.nativeElement.click()
    ..
  }

现在它可以工作了。

推荐阅读