在 Angular 中，ngModel 是一个非常常用的指令，用于双向数据绑定。在本文中，我们将详细介绍 ngModel 指令的使用方法和注意事项，以及一些示例代码。
ngModel 指令的基本用法
在使用 ngModel 指令之前，我们需要在模块中导入 FormsModule，如下所示：
import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ] }) export class AppModule { }
然后，在模板中使用 ngModel 指令，将其绑定到表单控件上。例如：
<input type="text" [(ngModel)]="name" />
上面的代码将一个文本框与一个名为“name”的属性进行双向绑定。表单控件可以是 input、textarea 或 select 等。
ngModel 指令的高级用法
绑定对象的属性
有时候，我们需要绑定对象的属性，而不是对象本身。在这种情况下，我们可以使用“点语法”。例如：
<input type="text" [(ngModel)]="user.name" />
上面的代码将一个文本框与一个名为“user.name”的属性进行双向绑定。
自定义双向绑定
有时候，我们需要对双向绑定进行自定义处理。例如，我们需要将输入框的值转换成大写字母。在这种情况下，我们可以使用自定义双向绑定。例如：
<input type="text" [(ngModel)]="name | uppercase" />
上面的代码将一个文本框与一个名为“name”的属性进行双向绑定，并在绑定的过程中将输入的值转换成大写字母。
防止表单提交
当用户提交表单时，Angular 会自动更新模型的值。如果我们希望在表单提交之前对模型的值进行检查并可能取消提交，则可以使用 (ngModelChange) 事件。例如：
<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange($event)" />
在组件中，我们需要定义一个回调函数 onNameChange，用于检查模型的值。如果不符合要求，则可以取消提交。例如：
onNameChange(newValue: string) { if (newValue.indexOf(' ') >= 0) { // 模型的值不符合要求，取消提交 return false; } }
ngModel 指令的注意事项
- ngModel 指令只能用于表单控件。
- ngModel 指令必须和 [( ... )] 语法配合使用。
- 如果要绑定对象的属性，则需要使用“点语法”。
- 当表单提交时，Angular 会自动更新模型的值。
- 如果需要在表单提交之前对模型的值进行检查，并可能取消提交，则可以使用 (ngModelChange) 事件。
示例代码
以下是一个使用 ngModel 指令进行双向绑定的示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ------ ----- ------- ----- ---------------------- ----- ------ ------------------------ ------ ----------- --------- ----------------------- -- ------ ----- ------ -------------------------- ------ ------------ ---------- ------------------------ -- ------ ----- ------ ------------------------------ --------- ------------ -------------------------------------- ------ ------- --------------------------- ------- - -- ------ ----- ------------ - ----- - -------- ------ ---- - - ----- --- ------ --- -------- -- -- ---------- - ----------------------- - -展开代码
上面的代码将一个表单和一个名为“user”的对象进行双向绑定。当用户提交表单时，将会在控制台打印出“user”对象的值。您可以根据自己的需求修改示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b96732306f20b3a67bd8a5
