我使用 mat-raised-button 創建了一個帶有提交按鈕的表單，但它什么也沒做
我期待它使用我的 TS 檔案中的 onSubmit() 函式列印一些內容到控制臺。我嘗試使用普通按鈕但仍然無法正常作業。我在這里做錯了什么。
HTML：`
<div class="center">
<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" >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')
}
}
`
uj5u.com熱心網友回復：
您不能為tag設定type="submit" 。這就是您的 (ngSubmit is not working ) 的原因。如果您想使用 ngSubmit() 將您的 a標簽更改為button。否則，使用(click)方法呼叫函式。
uj5u.com熱心網友回復：
要處理來自按鈕元素的事件，您只需在按鈕中添加（單擊）即可。您可以在此處獲取更多資訊：https ://angular.io/guide/event-binding
<a mat-raised-button type="submit" class="btncolor" (click)="onSubmit()">Sign Up!</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524724.html
標籤：有角度的打字稿