如何在 Angular 8 中提交带有 a 标签的表单答案

【问题标题】：How to submit a form with an a tag in Angular 8如何在 Angular 8 中提交带有 a 标签的表单
【发布时间】：2020-05-18 16:07:15
【问题描述】：

我在隐藏的输入字段中有表单数据，当用户单击<a> 标记时，我想使用这些数据提交。

<form action="/submit/form/link">
  <input type="hidden" [attr.value]="orderNumber.id" />
  <input type="hidden" [attr.value]="orderNumber.country" />
  <a>start order process</a>
</form>

我似乎找不到任何提交带有<a> 标记的表单的示例。我知道我可以使用<input type="submit" /> 或<button type="submit">submit</button> 提交，但我需要在这里使用<a> 标签。

我发现我可以在我的<a> 标记中使用(click) 属性，然后在我的.ts 文件中运行一个函数，就像

<a (click)="startOrderProcess()">start order process</a>

然后我在我的.ts 文件中找不到有关如何以编程方式提交表单以转到操作链接/submit/form/link 的示例。

如何使用<a> 标签提交上面带有隐藏输入数据的表单？

【问题讨论】：

/submit/form/link 是同一个组件吗？

标签： javascript angular typescript forms submit

【解决方案1】：

您可以执行以下操作，

在 module.ts 文件中，import { FormsModule } from @angular/forms
实现模板驱动的表单。
在component.ts文件中，import { Router } from @angular/router & import { ngForm } from '@angular/forms
在component.ts文件中，添加constructor(private router: Router) {}
在component.html文件中，添加<form #formName = 'ngForm'> & <a (click)="startOrderProcess(formName)">
在您的 component.ts 文件中，在单击锚标记时调用的函数中，执行以下操作，startOrderProcess(form:NgForm) { console.log(form.value); this.router.navigate(['/submit/form/link']); }

【讨论】：

【解决方案2】：

首先你需要导入角度路由器：

import {Router} from "@angular/router"

然后将它注入到你的组件构造函数中：

constructor(private router: Router) { }

最后在你的 startOrderProcess() 函数中调用 .navigate 方法：

this.router.navigate(['/submit/form/link']);

【讨论】：

【解决方案3】：

其实这里不需要隐藏的输入框。

假设 orderNumber.id 和 orderNumber.country 是您要提交的值，您可以简单地使用点击功能。

<a (click)="startOrderProcess()">start order process</a>

在 startOrderProcess() 中，

// if same component
startOrderProcess() {
  // do whatever you want 
}



// if another component
startOrderProcess() {
   this.router.navigate(['/submit/form/link']);
}

您还需要在后者中传递参数。

查看Angular 4 : Click on a link with parameters

【讨论】：

【解决方案4】：

使用 ngModel 指令绑定输入字段。点击链接调用函数读取类中的ngModel数据并用它来处理

【讨论】：