了解 Angular 7 中的 NgModel 指令

在 Angular 7 中，如果你想将表单数据与组件类绑定在一起，NgModel 指令就是很好的选择。

什么是 NgModel 指令

NgModel 指令是 Angular 7 中一个内置的指令，它提供了双向绑定表单数据的能力。它将表单元素的值与一个组件类中的属性进行绑定，对于数据的修改会自动反映到表单元素上，反之亦然。

如何使用 NgModel 指令

先上一段模板代码示例：

<input [(ngModel)]="name" name="name" />

以上示例中，我们将 ngModel 放在了 input 元素上，同时设置了 [(ngModel)] 属性绑定到组件类的 name 属性上。这里需要注意的是，[] 表示单向数据绑定，而 [] 和 () 的组合 [( )] 表示双向数据绑定。

V把一个形式控件(例如输入框)添加到表单中时可以使用ngModel指令,要使用它们

• 第一步是导入 FormsModule 到你的模块中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; 

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 在模板HTML代码中绑定:

<input [(ngModel)]="name" name="name" />

这里使用双向绑定 [(ngModel)] 将 name 属性绑定到了 input 元素上，如果使用单向绑定 [ngModel]，则输入框将不可用。

特别注意事项

• 在使用 ngModel 指令时，需要在应用中导入 FormsModule 以便 Angular 能够识别该指令。
• 如果在组件类中使用了 ngModel，需要将该属性声明为 @Input()。
• 对于一些表单元素，例如 checkbox 和 select 元素，需要正确地设置 value 或 ngValue 属性才能使 ngModel 正常工作。

参考链接

Angular 官方文档