Angular Academy · 课时

使用 ngModel 双向绑定

Q: 「使用 ngModel 双向绑定」这节课中我会学到什么？

将表单输入与组件状态同步。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将表单输入与组件状态同步。

使用 ngModel 双向绑定 是 CoddyKit 上的免费 Angular Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

什么是双向绑定

双向绑定会让组件与视图中的值保持同步：一方更新时，另一方也会更新。其语法是盒中香蕉 [()]。

盒中香蕉

组合语法 [(...)] 是属性绑定加事件绑定的简写形式。方括号是盒子，圆括号是香蕉。

<!-- shorthand -->
<input [(ngModel)]="name">

<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">

认识 ngModel

ngModel 是一个指令，用于对输入框、选择框和文本区域等表单控件执行双向绑定。

<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>

导入 FormsModule

若要使用 ngModel，您必须在独立组件或 NgModule 中导入 FormsModule。

import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [FormsModule],
  template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
  name = "";
}

绑定文本输入框

用户输入时，绑定的属性会立即更新；在代码中更改该属性时，输入框也会随之更新。

<input [(ngModel)]="email">
<p>Current: {{ email }}</p>

绑定复选框

ngModel 支持复选框，并将其绑定到布尔值。

<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>

// component
agreed = false;

绑定选择框

对于选择元素，ngModel 会绑定到所选选项的值。

<select [(ngModel)]="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>

表单中的 ngModel

在模板驱动表单中，请添加 name 特性，以便 Angular 将控件注册到表单中。

<form #f="ngForm">
  <input name="city" [(ngModel)]="city">
</form>

独立使用 ngModel

在表单外部，只要导入了 FormsModule，ngModel 就可以独立工作；不需要 name。

<input [(ngModel)]="search">

何时使用 ngModel

ngModel 非常适合简单的模板驱动表单。对于复杂的验证和动态表单，通常更推荐响应式表单。

响应变化

如果您只需要响应变化，可以直接绑定 (ngModelChange) 事件，而不必使用完整的双向绑定。

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

快速检查

测试您对 ngModel 双向绑定的理解。

回顾

双向绑定使用盒中香蕉语法 [(ngModel)]，该语法组合了属性绑定和事件绑定。导入 FormsModule 后，即可将其用于输入框、复选框和选择框。

常见问题解答

「使用 ngModel 双向绑定」课时是免费的吗？

是的 — 「使用 ngModel 双向绑定」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「使用 ngModel 双向绑定」这节课中我会学到什么？

将表单输入与组件状态同步。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 ngModel 双向绑定」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy