如何在提交按钮中使用 routerLink

【问题标题】：How to use routerLink in submit button如何在提交按钮中使用 routerLink
【发布时间】：2019-06-14 12:41:02
【问题描述】：

我想在我的表单提交按钮中使用 routerLink。

当我使用 routerLink 时，我的表单没有提交。它显示“您的表单未连接”。

这是我的 HTML 代码-

<form novalidate [formGroup]="planForm"(ngSubmit)="onSubmit()"class="form-group">
   <button type="submit" class="btn btn-primary btn-1" routerLink="/plan-list">Submit</button>
</form>

我收到了这个错误：

“表单提交因表单未连接而取消”

【问题讨论】：

标签： angular

【解决方案1】：

在HTML 文件中

<form [formGroup]="planForm">
 <button (click)="submit()"></button>
</form>

在ts 文件中，您可以通过router 以更好的方式编写您的router

 constructor(
  private router:Router //instanciate a router
)

您的提交方法如下所示

submit(){
    this.router.navigate(['/plan-list']) //your router URL need to pass it here
  }

【讨论】：

【解决方案2】：

当您的按钮是提交类型时，您应该使用这样的 onSubmit() 函数在处理单击事件时进行导航

onSubmit() {
    this.router.navigateByUrl('/plan-list');
}

【讨论】：