Angular: 没有将 "exportAs" 设置为 "ngForm" 的指令时出错
Angular: Error no directive with "exportAs" set to "ngForm"
我已经尝试导入 FormsModule 和 NgForm 模块以及将 FormsModule 添加到导入数组。
下面是我的代码:
//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, NgForm} from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<form #searchForm="ngForm">
<input type="text" required [(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm">
<p class="error" [hidden]="inputSearch.valid"> This input is required</p>
</form>
`,
styles: [`
.error {
color: red;
font-size: 11px;
}
`]
})
export class App {
public model = {
search: ""
}
constructor() {
}
}
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [App],
bootstrap: [App],
})
export class AppModule {}
下面是错误打印输出:
runtime.9ff156e16d788666a54a.js:16 Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" (" ]#searchForm="ngForm"> ]#inputSearch="ngForm"> This input is required
"):
ng:///AppModule/App.html@2:76 Can't bind to 'ngModel' since it isn't a
known property of 'input'. (" ][(ngModel)]="model.search"
ngControl="search" #inputSearch="ngForm"> https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js Loading
https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js f @
runtime.9ff156e16d788666a54a.js:16
错误是由这一行引起的:
#inputSearch="ngForm"
这是正确的行:
#inputSearch="ngModel"
这是工作示例。当您在表单标签中使用 ngModel 时,您还需要为 "name" 属性提供值。
<form #searchForm="ngForm">
<input type="text" required name="search" [(ngModel)]="model.search" #inputSearch="ngModel">
<p class="error" [hidden]="inputSearch.valid"> This input is required</p>
</form>
我已经尝试导入 FormsModule 和 NgForm 模块以及将 FormsModule 添加到导入数组。
下面是我的代码:
//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, NgForm} from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<form #searchForm="ngForm">
<input type="text" required [(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm">
<p class="error" [hidden]="inputSearch.valid"> This input is required</p>
</form>
`,
styles: [`
.error {
color: red;
font-size: 11px;
}
`]
})
export class App {
public model = {
search: ""
}
constructor() {
}
}
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [App],
bootstrap: [App],
})
export class AppModule {}
下面是错误打印输出:
runtime.9ff156e16d788666a54a.js:16 Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" ]#searchForm="ngForm"> ]#inputSearch="ngForm"> This input is required
"): ng:///AppModule/App.html@2:76 Can't bind to 'ngModel' since it isn't a known property of 'input'. (" ][(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm"> https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js Loading https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js f @ runtime.9ff156e16d788666a54a.js:16
错误是由这一行引起的:
#inputSearch="ngForm"
这是正确的行:
#inputSearch="ngModel"
这是工作示例。当您在表单标签中使用 ngModel 时,您还需要为 "name" 属性提供值。
<form #searchForm="ngForm">
<input type="text" required name="search" [(ngModel)]="model.search" #inputSearch="ngModel">
<p class="error" [hidden]="inputSearch.valid"> This input is required</p>
</form>