CODEWITHSUNDEEP
angulartypescript
yessin el khaldi
yessin el khaldi

Reputation: 5

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

}

`

Upvotes: 0

Views: 399

Answers (2)

shubham sharma
shubham sharma

Reputation: 146

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.

Upvotes: 4

Yew Hong Tat
Yew Hong Tat

Reputation: 694

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>

Upvotes: 0

Related Questions