Angular 找不到名称'；Ngform'；

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

src/app/pages/addbooking/servicing/servicing.component.ts（40,17）：错误TS2304:找不到名称“Ngform”

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

---

请帮帮我。我不知道是哪里出了错误。

拼写错误使用

NgForm

代替

NgForm

，并将

这个。表单

替换为

表单

。请查看下面的代码片段

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

---

您应该从@angular/forms导入NgForm以执行此操作： i、 e

---

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

要解决此错误，您可能已在app.module.ts文件中的代码行下方添加了代码

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

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

我希望它能帮助你。

---

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

从'@angular/forms'导入{NgForm}；

---

您将获得解决方案。

您应该在应用程序模块中包含表单模块，请按照文档中的说明进行操作，如果您在提交

onSubmit

方法中有输入错误；它应该是

NgForm

，而不是

NgForm

你有一个打字错误：你写的是NgFrom而不是NgForm，我认为这并不能解决问题，因为使用this.form和使用form是一样的，问题中描述的错误是另一个错误是

找不到名称“Ngform”。

我的解决方案看起来是正确的。更正注释中的打字错误将是better@Jota.Toledo：我会处理这件事的

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

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

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