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

Question

我在隐藏的输入字段中有表单数据，我想在用户单击 <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 文件中以编程方式提交表单以转到操作 link /submit/form/link 的示例。

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

Answer 1

首先你需要导入 angular 路由器：

import {Router} from "@angular/router"

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

constructor(private router: Router) { }

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

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

Answer 2

您可以执行以下操作，

在 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']); }

Answer 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

Answer 4

使用 ngModel 指令绑定输入字段。单击 link 调用函数读取 class 中的 ngModel 数据并用它来处理

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

How to submit a form with an a tag in Angular 8

javascript

forms

submit

typescript

angular