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

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.

my .ts file code

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>

CodePudding user response：

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()">

CodePudding user response：

Try to below way, I hope it work for you.

Html

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

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