angular material button not functioning

I have created a form with a submit button using mat-raised-button but it does nothing

I was expecting it to print something to console using the onSubmit() function in my TS file.
I tried using a normal button but still not working. What am I doing wrong here.

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')
    
  }

}

`

>Solution :

To handle an event from a button element, you just need to add (click) into your button. You can get more information here: https://angular.io/guide/event-binding

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