Question

我是角色的新手，我正在使用模板驱动的形式。当我使用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>

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

  }

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

Answer 1

在您使用函数的同一个文件（component.ts）中导入

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

你会得到解决方案。

Answer 2

拼写错误使用NgForm代替Ngform，并且仅将this.form替换为form。请检查以下代码段

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

Answer 3

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

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

Answer 4

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

要解决此错误，您可能已在 app.module.ts 文件

中的代码行下方添加了

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

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

我希望它能对您有所帮助。 Namaste

找不到名字'Ngform'

4 个答案: