angular - 找不到名称 'Ngform'

Question

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

src/app/pages/add-booking/servicing/servicing.component.ts(40,17):错误 TS2304:找不到名称“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>

和服务.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();
         }
       }

  }

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

Answer 1

你应该从@angular/forms 导入 NgForm 来做到这一点:即

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