在Angular 6中,如果你尝试在<input>
元素上使用ngModel
指令,但遇到错误提示“无法绑定到'ngModel',因为它不是Angular 6中'input'的已知属性”,这通常是因为你没有正确导入FormsModule
。
ngModel
是Angular表单模块的一部分,因此你需要确保在你的模块中导入了FormsModule
。以下是如何在Angular 6中正确导入和使用FormsModule
的步骤:
在你的Angular模块文件(通常是app.module.ts
)中,导入FormsModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule // 添加FormsModule到imports数组
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在你的组件模板文件(例如app.component.html
)中,你可以使用ngModel
指令:
<input [(ngModel)]="yourVariable" name="yourInputName">
这里的yourVariable
是你组件类中的一个属性,yourInputName
是表单控件的名称。
假设你有一个简单的组件,其中包含一个输入框,你希望在输入框中输入的内容能够绑定到组件类的一个属性上:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
yourVariable = ''; // 初始化属性
}
<input [(ngModel)]="yourVariable" name="yourInputName">
ngModel
在Angular 2及以上版本中可用,但如果你使用的是Angular 4或更早版本,可能需要使用ngModel
的替代方案,如ng-model
指令(注意没有括号)。
FormsModule
在模块的imports
数组中的顺序正确,通常放在BrowserModule
之后。
领取专属 10元无门槛券
手把手带您无忧上云