CODEWITHSUNDEEP
angularangular-forms
Muhammad Rizwan
Muhammad Rizwan

Reputation: 29

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

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>

Upvotes: 2

Views: 3732

Answers (3)

Ajaz Beig
Ajaz Beig

Reputation: 1

Issue is getting due to using same formSelector and ngSubmit directive. just keep them different. issue w

    <form (ngSubmit)="generateReport()" #generateBasicReport="ngForm"
      class="form-margin grid grid-cols-1 sm:grid-cols-2 gap-4">

      <div class="text-xs searchable-dropdown fleetiq-input-container">
        <label for="city" class="fleetiq-input-label text-xs z-1">City</label>
        <ng-select [items]="exporters" bindLabel="name" bindValue="exporter" [(ngModel)]="report_name"
          [searchable]="true" (change)="selectReportType($event)" [ngModelOptions]="{standalone: true}" appendTo="body"
          dropdownPosition="auto">
        </ng-select>
      </div>

      <button [disabled]="!generateBasicReport.form.valid" type="submit"
        class="w-full px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-md">
        Generate Report
      </button>


    </form>

enter image description here

Upvotes: 0

Bansi29
Bansi29

Reputation: 1079

Try it this way:

Html:

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

ts:

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

Upvotes: 0

Nirali Gajjar
Nirali Gajjar

Reputation: 116

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

Upvotes: 4

Related Questions