- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 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();
}
}
}
请帮助我..我不知道错误来自哪里
最佳答案
你应该从@angular/forms 导入 NgForm 来做到这一点:即
import { NgForm } from '@angular/forms';
关于angular - 找不到名称 'Ngform',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48617699/
在 Angular 1 (1.5) 中,表单 Controller 有一个 $setSubmitted()允许您以编程方式设置 .$submitted 的方法标记为真。 如何通过 NgForm 对象在
我是 Angular 的新手,我正在使用模板驱动的表单。当我使用 NgForm 时,它抛出错误: src/app/pages/add-booking/servicing/servicing.compo
我是 Angular 的新手,我正在使用模板驱动的表单。当我使用 NgForm 时,它抛出错误: src/app/pages/add-booking/servicing/servicing.compo
我正在尝试制作一个包含两个不同组件的表单。一位家长和一位 child 。我查看了很多教程,他们都在谈论提供服务。 不过,我在这个website上找到了一个方法.它包括在子组件中添加以下内容: view
我遇到了以下问题。我想使用 NG2 Forms。根据 Angular 2 文档,在表单上使用 ngForm 指令并在输入上使用 ngControl 指令,表单应该始终能够访问输入的有效性。 如果输入与
我有简单的形式 Is required lol 和组件作为 export class InputOverviewExample { comm
我最近一直在使用 React,并且非常喜欢它,但我错过了一些我在其他框架中习惯的东西。 ngForm 中主要的一个来自 Angular,Angular 使用它来提供非常简单的表单验证。检查表单是否有效
当我提交表单时,我有这个功能 login(form: NgForm) 如果我尝试以下操作 console.log(form.value.password); // this works perfect
我是 Angular 初学者,我正在尝试打印在控制台中选择的表单元素的值。所有其他元素都已打印,但 select 选定列表元素显示 undefined。这是我的代码category.services.
我正在尝试验证使用指令生成的动态表单输入并隔离范围。在指令之外,我有主窗体,在 ng-repeat 内部,我尝试使用 ng-form,但它从未显示错误消息。最初我在 ng-repeat 上有 ng-f
目标是当用户单击按钮转到下一页时,如果页面部分填写但无效,则阻止用户继续并显示错误指示符。 在模板驱动的表单中,我有几个容器元素使用 NgModelGroup 属性来表示表单中的“页面”。在我的组件中
我正在尝试做一个登录表单组件,但我无法读取表单数据。 当我尝试在控制台上写入用户名时,'undefined' 写入。 一切看起来都很正常,但表单数据没有到达组件。 下面是html代码:
这是父 HTML 这是子 HTML 我需要访问父组件中的子窗体状态 最佳答案 子模板: 子组件: export class Ch
login 工作组件的html代码是这样的。 Regis
我想知道是否有任何方法可以检索从表单的 NgForm.controls 对象中提取的 FormControl 的 NgModel它属于哪个,或者直接从表单中检索 NgModel。 我有一个表单,在提交
如何在组件中引用“myform”?是否可以?一定要使用 formbuilder(我尽量避免使用它)吗? Value 最佳答案 实际上还有另一种方法可以做到这一点。您可以使用
这个问题在这里已经有了答案: Angular 4.4.0-4.4.2 production build throwing "No provider for NgForm!" error (2 个答案
我在 Angular 4 上处理表单,我不知道使用 NgForm 和 FormGroup 处理错误和输入验证器有什么区别。处理表格有什么大的不同吗? 最佳答案 如果我没看错,您就会遇到模板驱动表单和响
我已经包含了 FormsModule 但它显示错误。 There is no directive with “exportAs” set to “ngForm” 我的 Login.component.
Angular 6 表单验证简单示例。通过电子邮件验证和选择框(下拉)。ngForm 带有选择框的 Angular 6 简单示例 最佳答案 使用ngForm。将其导入您的 component.modu
我是一名优秀的程序员,十分优秀!