angular material button not functioning

Issue

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

You can't set a type="submit" for a tag . This is the reason your (ngSubmit is not working ). If you want to use ngSubmit() change your a tag to the button. Otherwise, use the (click) method to invoke a function.

Answered By - shubham sharma