Unknown method 'onSubmit' Angular 4 forms

Question

I'm getting the error 'Unknown method 'onSubmit'' in my terminal when I add in the following code (see below) form template into my Angualr app.

I'm also getting this error in the console but I can clear this by removing the element completely.

*

Uncaught Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26390)
    at PropertyWrite.visit (compiler.js:4679)
    at convertActionBinding (compiler.js:25814)
    at eval (compiler.js:28414)
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:28410)
    at nodes.(:4200/anonymous function) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28050:27)
    at eval (compiler.js:28355)
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:28354)

*

Can anyone point me in the right direction?

add-client.component.html

    <div class="row">
      <div class="col-md-6">
        <a routerLink="/" href="#" class="btn btn-link"><i class="fa fa-arrow-circle-o-left"></i> Back to Dashboard</a>
      </div>
      <div class="col-md-6">

      </div>
    </div>

    <div class="card">
      <div class="card-header">
        Add Client
      </div>
      <div class="card-block">
        <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <!-- <form #validateForm="ngForm" (ngSubmit)="validate(validateForm)"> -->
          <div class="form-group">
            <label for="firstName">First Name</label>
            <input 
              type="text"
              class="form-control"
              [(ngModel)]="clientFirstName"
              name="firstName"
              #clientFirstName="ngModel"
            >

            <div *ngIf="clientFirstName?.error.required && clientFirstName.touched" class="alert alert-danger">
              First Name is required
            </div>
            <div *ngIf="clientFirstName?.error.minlength && clientFirstName.touched" class="alert alert-danger">
              Must be at least 2 characters
            </div>
          </div>

          <div class="form-group">
              <label for="lastName">Last Name</label>
              <input 
                type="text"
                class="form-control"
                [(ngModel)]="clientLastName"
                name="lastName"
                #clientLastName="ngModel"
                minlength="2"
                required
              >
              <div *ngIf="clientLastName?.error.required && clientLastName.touched" class="alert alert-danger">
                Last Name is required
              </div>
              <div *ngIf="clientLastName?.error.minlength && clientLastName.touched" class="alert alert-danger">
                Must be at least 2 characters
              </div>
            </div>

            <div class="form-group">
                <label for="phone">Phone</label>
                <input 
                  type="number"
                  class="form-control"
                  [(ngModel)]="clientPhone"
                  name="phone"
                  #clientPhone="ngModel"
                  minlength="10"
                >
                <div *ngIf="clientPhone?.error.minlength && clientPhone.touched" class="alert alert-danger">
                  Add a valid Phone Number
                </div>


   </div>

          <div class="form-group">
              <label for="email">Email</label>
              <input 
                type="text"
                class="form-control"
                [(ngModel)]="clientEmail"
                name="email"
                #clientEmail="ngModel"
                minlength="2"
                required
              >
              <div *ngIf="clientEmail?.error.required && clientEmail.touched" class="alert alert-danger">
                Email is required
              </div>
              <div *ngIf="clientEmail?.error.minlength && clientEmail.touched" class="alert alert-danger">
                Must be at least 2 characters
              </div>
            </div>

            <div class="form-group">
                <label for="balance">Balance</label>

                <input 
                  type="number"
                  class="form-control"
                  [(ngModel)]="clientBalance"
                  name="balance"
                  #clientBalance="ngModel"
                  [disabled]="disableBalanceOnAdd">

            </div>

              <button type="submit" class="btn btn-primary btn-block"></button> 
    </form>
  </div>
</div>

add.client.component.ts

import { Component, OnInit } from '@angular/core';
import { Client } from '../../models/client';
import { FormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add-client',
  templateUrl: './add-client.component.html',
  styleUrls: ['./add-client.component.css']
})

export class AddClientComponent implements OnInit {
  client: Client = {
    firstName: '',
    lastName: '',
    email: '',
    Phone: '',
    balance: 0
  }

  disableBalanceOnAdd:boolean = true;

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import {NgForm} from '@angular/forms';

//AngularFire imports
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from "angularfire2/database-deprecated"
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireAuth } from 'angularfire2/auth';

//Component Imports
import { AppComponent } from './app.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ClientsComponent } from './components/clients/clients.component';
import { ClientDetailsComponent } from './components/client-details/client-details.component';
import { AddClientComponent } from './components/add-client/add-client.component';
import { EditClientComponent } from './components/edit-client/edit-client.component';
    import { NavbarComponent } from './components/navbar/navbar.component';
    import { SidebarComponent } from './components/sidebar/sidebar.component';
    import { LoginComponent } from './components/login/login.component';
    import { RegisterComponent } from './components/register/register.component';
    import { SettingsComponent } from './components/settings/settings.component';
    import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';

    //Service Imports
    import { ClientsService } from './services/clients.service';

    const appRoutes: Routes = [
      { path: '', component:DashboardComponent },
      { path: 'login', component: LoginComponent },
      { path: 'register' , component:RegisterComponent },
      { path: 'add-client' , component:AddClientComponent }
    ];

    export const firebaseConfig = {
      //all my firebase api requests (removing for S.O.)
    }


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    ClientsComponent,
    ClientDetailsComponent,
    AddClientComponent,
    EditClientComponent,
    NavbarComponent,
    SidebarComponent,
    LoginComponent,
    RegisterComponent,
    SettingsComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    FormsModule

  ],
  providers: [
    AngularFireAuth,
    ClientsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

you should have a onSubmit() method in your component that because this line of your code <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate> so in your component add this :

onSubmit(form: NgForm) {    
    console.log(form.value);
}

here form will contain all the value for your each of your input

Answer 2

This is the line causing the issue:

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>

You need to implement the onSubmit method in your component.

import { Component, OnInit } from '@angular/core';
import { Client } from '../../models/client';
import { FormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add-client',
  templateUrl: './add-client.component.html',
  styleUrls: ['./add-client.component.css']
})

export class AddClientComponent implements OnInit {
  client: Client = {
    firstName: '',
    lastName: '',
    email: '',
    Phone: '',
    balance: 0
  }

  disableBalanceOnAdd:boolean = true;

  constructor() { }

  ngOnInit() {}

  onSubmit(val: any) {
     // do something with the form result
  }

}