我面临的问题是该代码中的按钮没有触发提交事件,但是如果我删除路由器链接,那么它将开始触发事件 >正常情况下应该如此。我猜测路由是在触发事件之前发生的。
如何更改代码,使其运行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>
TYPESCRIPT
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() {
}
}
答案 0 :(得分:1)
您可以在route
处理程序中手动onSubmit
进行以下更改
.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