Cannot find name 'Ngform'

Question

I am new to angular and I am working with template driven form.When I am using NgForm Its throwing error :

src/app/pages/add-booking/servicing/servicing.component.ts(40,17): error TS2304: Cannot find name 'Ngform'.

Below is my is code : servicing.component.html

<form novalidate #a="ngForm" (ngSubmit)="onSubmit(a)"  >
  <div class="row">
    <div class="col-md-6 col-sm-6 col-lg-6">
            <div class="form-group">
              <input type="text" id="num" name="num" class="form-control" required [(ngModel)]="registrationNumber" #num="ngModel">
              <label class="form-control-placeholder" for="num">Registration Number</label>
            </div>
            <div class="form-control-feedback"*ngIf="num.errors && (num.dirty || num.touched)">
                <p *ngIf="num.errors.required">Registration Number is required</p>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-lg-6">
          <button type="button"(click)='someFunction()'>click</button>
        </div>
  </div>

  <div class="line">
  <h4><span>Vehicle Details</span></h4>
</div>

<div class="row">
  <div class="col-md-6 col-lg-6 col-sm-6">
    <div class="form-group">
      <select name="brand" id="brand" class="form-control"  [(ngModel)]="data.vehicleBrand" #brand="ngModel" required>
          <option *ngFor = "let sa of vehicleBrand" [value] = "sa"> {{sa}}</option>
      </select>
    </div>
  </div>
  <div class="col-md-6 col-lg-6 col-sm-6">
    <div class="form-control-feedback"*ngIf="brand.errors && (brand.dirty || brand.touched)" style="display:inline-block">
        <p *ngIf="brand.errors.required">Brand is required</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6 col-lg-6 col-sm-6">
    <div class="form-group">
      <select name="model" id="model" class="form-control"  [(ngModel)]="data.VehicleModel" #model="ngModel" required>
          <option *ngFor = "let sa of vehicleModel" [value] = "sa"> {{sa}}</option>
      </select>
      <label class="form-control-placeholder" for="ServiceAdvisor">Vehicle Model</label>
    </div>
  </div>

  <div class="col-md-6 col-lg-6 col-sm-6">
    <div class="form-control-feedback"*ngIf="model.errors && (model.dirty || model.touched)">
        <p *ngIf="model.errors.required">Model is required</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6 col-lg-6 col-sm-6">
    <div class="form-group">
      <select name="variant" id="variant" class="form-control"  [(ngModel)]="data.Vehiclevariant" #variant="ngModel" required>
          <option *ngFor = "let sa of vehicleVariant" [value] = "sa"> {{sa}}</option>
      </select>
      <label class="form-control-placeholder" for="ServiceAdvisor">Vehicle Variant</label>
    </div>
   </div>
    <div class="col-md-6 col-lg-6 col-sm-6">
      <div class="form-control-feedback"*ngIf="variant.errors && (variant.dirty || variant.touched)">
          <p *ngIf="variant.errors.required">Variant is required</p>
      </div>
    </div>
</div>
  <button type="submit" [disabled]="a.invalid">S</button>
</form>

And servicing.component.ts ::

import { Component, OnInit } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {Servicing} from '../../model/AddServicing';
import {NgForm} from '@angular/forms';
import {ViewChild } from '@angular/core';
import {ServicingService } from '../../services/addServicing.service';


@Component({
  selector: 'app-servicing',
  templateUrl: './servicing.component.html',
  styleUrls: ['./servicing.component.scss']
})
export class ServicingComponent implements OnInit {

  @ViewChild('f') form: any;
  registrationNumber:string;
  private ServicingType: string[];
  private Complaints: string[];
  private service_advisor: string[];
  private creName: string[];

  public vehicle = [];

  constructor(private _data:ServicingService) { }


  ngOnInit() {
    this.ServicingType =  ['Body Repair', 'Servicing', 'Both'];
    this.Complaints =  ['First', 'Second', 'Third'];
    this.service_advisor = ['Anurag','Rohit','Rahul','Add Service Advisor'];
    this.creName = ['Rohnit','Mohit','Nitin','Add CRE'];
    this._data.getUser().subscribe(data => this.vehicle = data);
  }

  someFunction(){
    console.log(this.registrationNumber);
  }

  onSubmit(form:Ngform) {
     if (this.form.valid) {
         console.log("Form Submitted!");
         console.log(this.form.value.num);
         this.form.reset();
         }
       }

  }

Please Help me..I do not know from where is error is coming

You should include form module at your app module , follow the documentation angular.io/guide/forms — Nour
– Nour, Commented Feb 5, 2018 at 7:40
You have a typo in the onSubmit method; it shouldbe NgForm, not Ngform — Jota.Toledo
– Jota.Toledo, Commented Feb 5, 2018 at 8:41

Mozahler · Accepted Answer · 2018-10-23 18:03:49Z

4

You should import NgForm from @angular/forms to do that: i.e

import { NgForm }   from '@angular/forms';

edited Oct 23, 2018 at 18:03

Mozahler

5,3636 gold badges42 silver badges63 bronze badges

answered Oct 23, 2018 at 16:47

user10547610

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josef · Accepted Answer · 2021-05-10 20:37:06Z

1

in the same file where you are using your function (component.ts) just import

import { NgForm } from '@angular/forms';

you will get get solution.

edited May 10, 2021 at 20:37

Josef

3,6322 gold badges26 silver badges27 bronze badges

answered May 10, 2021 at 18:25

Imran Ahmad

112 bronze badges

Comments

santosh singh · Accepted Answer · 2018-02-05 08:35:38Z

0

Spelling mistake use NgForm instead of Ngform and also replace this.form to form only.check out following code snippet

onSubmit(form:NgForm) {
     if (form.valid) {
         console.log("Form Submitted!");
         console.log(form.value.num);
         form.reset();
         }
       }

edited Feb 5, 2018 at 8:35

answered Feb 5, 2018 at 7:40

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

5 Comments

David Over a year ago

You have a typo: you wrote NgFrom instead of NgForm

Gianluca Paris Over a year ago

I think this doesn't solve the problem, since using this.form is the same of using form, and the error described in the question is another

santosh singh Over a year ago

The error is Cannot find name 'Ngform'. and my solution looks correct

Jota.Toledo Over a year ago

Correcting a typo-question in the comments would be better

santosh singh Over a year ago

@Jota.Toledo : will take care of this

Ankur prajapati · Accepted Answer · 2020-05-05 17:59:27Z

There are chances of arising this error in angular when we import 'NgForm' from '@angular/forms' in anycomponentname.component.ts file.

To resolve this error you may have added below code line in app.module.ts file

import { FormsModule } from '@angular/forms';

@NgModule({
---------------
---------------
  imports: [     
        BrowserModule,
        FormsModule
  ]
---------------
---------------
})

I hope that it will help you. Namaste

Collectives™ on Stack Overflow

Cannot find name 'Ngform'

4 Answers 4

Comments

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Related