有角度的材料按钮不起作用

Question

我使用垫状按钮创建了一个带有提交按钮的表单，但它什么都不做

我期望它使用TS文件中的onSubmit((函数将某些内容打印到控制台。我试着用了一个普通的按钮，但还是没用。我在这里做错了什么。

HTML:`

<div class="center">
<form class="my-form" (ngSubmit)="onSubmit()">
<p> 
<mat-form-field appearance="legacy">
<mat-label>First name</mat-label>
<input type="text" name= "firstname" matInput ngModel>
</mat-form-field>
</p>
<p>
<mat-form-field appearance="legacy">
<mat-label>Last name</mat-label>
<input type="text" name= "lastname" matInput ngModel>
</mat-form-field>
</p>
<p>
<mat-form-field appearance="legacy">
<mat-label>Employee number</mat-label>
<input type="text" name= "employeenumber" matInput ngModel>
</mat-form-field>
</p>
<p>
<mat-form-field appearance="legacy">
<mat-label>Favorite Superhero</mat-label>
<input type="text" name= "favoritesuperhero" matInput ngModel>
</mat-form-field>
</p>
<p>
<mat-form-field appearance="legacy">
<mat-label>Email</mat-label>
<input type="text" name= "email" matInput ngModel>
</mat-form-field>
</p>
<a mat-raised-button type="submit" class="btncolor">Sign Up!</a>
</form>

</div>

`

TS；

`

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-signupform',
templateUrl: './signupform.component.html',
styleUrls: ['./signupform.component.scss']
})
export class SignupformComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}

onSubmit(){
console.log('Sign up complete')

}
}

`

Answer 1

您不能设置类型="提交">表示一个标记。这就是您的(ngSubmit不起作用(的原因。如果您想使用ngSubmit((，请将a标记更改为按钮。否则，请使用(单击(方法来调用函数。

Answer 2

要处理按钮元素中的事件，只需在按钮中添加(单击(即可。您可以在此处获取更多信息：https://angular.io/guide/event-binding

<a mat-raised-button type="submit" class="btncolor" (click)="onSubmit()">Sign Up!</a>