Angular Router按鈕未觸發提交事件

Question

我面臨的問題是此代碼中按鈕未觸發提交事件 ，但是如果我刪除路由器鏈接，則它將開始觸發事件，就像通常應該的那樣。 我猜測路由是在觸發事件之前發生的。

如何更改代碼，使其運行onSubmit（）函數，然后開始路由 。

我有一個簡單的角度代碼：

HTML

<form (submit)="onSubmit(theForm)" #homeForm='ngForm' ngControl="homeForm">
  <button 
    mat-raised-button
    color="accent"
    routerLink="/form"
    routerLinkActive="active">
    Submit
  </button>
  <mat-card>
      <mat-checkbox>Check me!</mat-checkbox>
  </mat-card>
</form>

打字稿

import { Component, Output, Input, OnInit } from '@angular/core';
import {FormsModule, FormGroup,  NgForm, FormBuilder} from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  onSubmit(form: NgForm) {
    console.log('You submit to me?');
    console.log(form);

  }
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
  }
}

Answer 1

您可以在onSubmit處理程序中手動route

進行以下更改

.TS

constructor(private fb: FormBuilder, private router : Router) { }

onSubmit(form: NgForm) {
    console.log('You submit to me?');
    console.log(form);
    this.router.navigate(['/forms']);

  }

同時從.html刪除routerLink