Angular - ngModel指令与双向绑定区别

在 Angular 中，ngModel 指令和 ngModel 的双向绑定是密切相关的概念，但它们的实现方式和用途存在关键区别：

1. ngModel 指令（基础功能）

• 作用：提供表单控件的单向数据绑定和状态跟踪
• 语法：[ngModel]（属性绑定）
• 数据流：单向（组件 → 视图）
• 主要功能：
  • 将组件数据绑定到表单元素
  • 跟踪控件状态（touched/pristine/valid 等）
  • 与 Angular 表单系统（如 FormGroup）集成
• 示例：

  <input [ngModel]="username" name="userField">
  

  • 当 username 改变时更新输入框的值
  • 输入框修改不会自动更新 username

2. ngModel 双向绑定

• 作用：实现双向数据同步
• 语法：[(ngModel)]（"香蕉盒"语法）
• 数据流：双向（组件 ⇄ 视图）
• 实现原理：
  • 是 [ngModel] + (ngModelChange) 的组合语法糖
  • 等价于：

    <input [ngModel]="username" 
           (ngModelChange)="username = $event">
    

• 核心功能：
  • 视图修改自动更新组件数据
  • 组件数据修改自动更新视图
  • 仍然保留状态跟踪能力
• 示例：

  <input [(ngModel)]="username" name="userField">
  

  // 组件中
  username = "初始值";
  

---

关键区别总结

特性	[ngModel] (指令)	[(ngModel)] (双向绑定)
绑定方向	单向（组件 → 视图）	双向（组件 ⇄ 视图）
语法	属性绑定 [ ]	双向绑定 [( )]
数据同步	仅组件到视图	自动双向同步
视图→组件更新	需手动处理 (ngModelChange)	自动处理
典型使用场景	只读数据展示	需要用户交互的表单输入

---

何时使用哪种方式？

1. 使用 [(ngModel)] 当：

   • 需要用户输入实时更新组件数据（如：表单输入、开关切换）

   <!-- 双向绑定 -->
   <input [(ngModel)]="email" type="email">
   <select [(ngModel)]="selectedOption">...</select>
   

2. 使用 [ngModel] 当：

   • 只需要显示数据（不需要回传修改）
   • 需要访问控件的状态/元数据

   <!-- 单向绑定 + 状态跟踪 -->
   <input [ngModel]="readonlyValue" 
          name="demo"
          #demo="ngModel">
   
   <div *ngIf="demo.touched && demo.invalid">
     错误信息
   </div>
   

---

注意事项

1. 必须引入 FormsModule：

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [FormsModule]
   })
   

2. 需要 name 属性：

   <!-- 必须提供 name -->
   <input [(ngModel)]="value" name="uniqueName">
   

3. 优先使用响应式表单：
   对于复杂表单，官方推荐使用响应式表单（ReactiveFormsModule）替代 ngModel

关键记忆点：

• [ngModel] = 单向传入数据
• [(ngModel)] = 双向同步数据（视图修改自动更新模型）
• 双向绑定本质是 [ngModel] + (ngModelChange) 的语法糖