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

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文件中运行 function ，所以类似于

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

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

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

Answer 1

首先需要导入angular路由器：

import {Router} from "@angular/router"

然后将其注入您的组件构造函数中：

constructor(private router: Router) { }

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

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

Answer 2

您可以执行以下操作，

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

Answer 3

实际上，您不需要此处的隐藏输入字段。

假设 orderNumber.id 和 orderNumber.country 是您要提交的值，您只需点击 function 即可。

<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：单击带有参数的链接

Answer 4

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