This expression is not callable. Type 'NgForm' has no call signatures

Question

I have created a basic signup from in angular and got this error

src/app/developers/signup/signup.component.html:55:45 - error TS2349: This expression is not callable. Type 'NgForm' has no call signatures.

55 <form #developersignup="ngForm" (ngSubmit)="developersignup()" > ~~~~~~~~~~~~~~~

src/app/developers/signup/signup.component.ts:5:16 5 templateUrl: './signup.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component SignupComponent.

ts file:

import { Component, OnInit } from '@angular/core';
    
@Component({`enter code here`
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
    
  constructor() { }
    
  ngOnInit(): void {
  }
  developersignup()
  {}
}

html file:

<form #developersignup="ngForm" (ngSubmit)="developersignup()"   >
  <table [cellPadding]="8">
    <tr>
      <td>Name :</td>
      <td>
        <input type="text" ngModel name="fullname" placeholder="enter full name">
      </td>
    </tr>
    <tr>
      <td>Email :</td>
      <td>
         <input type="email" ngModel name="emailaddress" placeholder="enter email address">
      </td>
    </tr>
    <tr>
      <td>Password :</td>
       <td>
         <input type="password" ngModel name="password" placeholder="enter password">
       </td>
    </tr>
    <tr>
      <td>Confirm Password :</td>
      <td>
        <input type="password" ngModel name="confirmpassword" placeholder="enter confirm password">
      </td>
    </tr>
    <tr>
      <td colspan="2" align="right">
         <button>Signup</button>
      </td>
    </tr>
  </table>
</form>

Answer 1

You used same name(i.e: developersignup) for ngSubmit method and reference Variable in your .html file. Below line for reference.

<form #developersignup="ngForm" (ngSubmit)="developersignup()">

Change name of anyone of them and you will not get that error.

For example <form #signupForm="ngForm" (ngSubmit)="developersignup()">

Answer 2

Try it this way:

Html:

<form #developersignup="ngForm" (ngSubmit)="submit(developersignup)">
    <!-- ... -->
</form>

ts:

submit(data : NgForm) {
    console.log(data.value);
}