找不到名称为'Ngform'的内容。

Question

我是新手，正在使用模板驱动表单的 Angular。当我使用 NgForm 时，它会抛出错误：

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

以下是我的代码：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>

并且 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();
         }
       }

  }

请帮我...我不知道错误来自哪里

- Atul Srivastava

---

你应该在你的应用模块中包含表单模块，按照文档 https://angular.io/guide/forms 的指示进行操作。 - Nour

您在onSubmit方法中有一个拼写错误；它应为NgForm，而不是Ngform。 - Jota.Toledo

Answer 1

您需要从@angular/forms导入NgForm来实现这一点： 例如：

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

- user10547610

Answer 2

在使用函数的同一文件中（component.ts），只需导入即可。

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

你会得到解决方案。

- Imran Ahmad

Answer 3

拼写错误，请使用NgForm而不是Ngform，并且将this.form替换为form。请查看以下代码片段。

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

- santosh singh

---

你有个拼写错误：你写成了NgFrom而不是NgForm。 - David

我认为这并不能解决问题，因为使用this.form和使用form是一样的，而问题描述中的错误是另一个问题。 - Gianluca Paris

错误是找不到名称'Ngform'。而且我的解决方案看起来是正确的。 - santosh singh

在注释中纠正一个拼写错误的问题会更好。 - Jota.Toledo

@Jota.Toledo：我会处理这个问题 - santosh singh

Answer 4

在Angular中，当我们从'@angular/forms'中导入'NgForm'时，在anycomponentname.component.ts文件中可能会出现此错误的机会。

为了解决这个错误，您可能已经在app.module.ts文件中添加了以下代码行。

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

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

希望对你有所帮助。 Namaste

- Ankur prajapati