如何在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>标签。

[我看到我可以在(click)标记中使用<a>属性，然后在.ts文件中运行一个函数，所以类似

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

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

我如何使用<a>标记提交上面包含隐藏输入数据的表单？

Answer 1

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

import {Router} from "@angular/router"

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

constructor(private router: Router) { }

最后在您的startOrderProcess（）函数中调用.navigate方法：

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

Answer 2

实际上，您在这里不需要隐藏的输入字段。

假设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 3

您可以执行以下操作，

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文件中，在单击锚标记的调用函数内，执行以下操作，

   startOrderProcess(form:NgForm) {
   console.log(form.value);
   this.router.navigate(['/submit/form/link']); }

Answer 4

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