我是新手,正在使用模板驱动表单的 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();
}
}
}
请帮我...我不知道错误来自哪里
onSubmit
方法中有一个拼写错误;它应为NgForm
,而不是Ngform
。 - Jota.Toledo