在 Angular 中，我们经常需要使用表单来收集用户输入的数据。而 ngModel 指令就是 Angular 提供的一种双向数据绑定的方式，可以将表单控件中的值与组件中的属性进行绑定，使得数据的变化能够自动反映到表单控件中，同时也能够将用户输入的数据同步到组件中的属性中。
在模板中使用 ngModel
要在模板中使用 ngModel，我们需要先导入 FormsModule 模块，并将其添加到 AppModule 中的 imports 数组中。
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接着，在表单控件中使用 ngModel 指令即可实现数据绑定。下面是一个简单的例子：
------ ---------------------- --------------- ---------------------
在这个例子中，我们使用了 [(ngModel)] 的语法糖，它实际上是将 ngModel 拆分成了一个输入属性和一个输出属性。输入属性用于将组件中的属性绑定到表单控件中，输出属性用于将表单控件中的值绑定回组件中的属性。在这个例子中，我们将组件中的 username 属性与一个文本输入框进行了双向绑定。
在组件中使用 ngModel
在组件中使用 ngModel，我们需要先在组件类中定义一个属性，并使用 @Input() 装饰器将其声明为一个输入属性。这个属性将会被绑定到表单控件中。
------ - ---------- ----- - ---- ----------------
------------
--------- -------------------
--------- -
-----
------ ---------------------------
------ ---------------------- --------------- --------------
------
-
--
------ ----- -------------------- -
-------- --------- -------
-在这个例子中，我们定义了一个 UserProfileComponent 组件，并在组件中声明了一个 username 属性，它将会被绑定到一个文本输入框中。在组件的模板中，我们使用了 [(ngModel)] 指令将文本输入框的值绑定到组件的 username 属性中。
使用 ngModel 的注意事项
在使用 ngModel 时，需要注意以下几点：
ngModel 指令只能用于表单控件中，例如 input、select 和 textarea 等。
ngModel 绑定的属性必须是一个公共属性，即必须使用 public 或者省略访问修饰符的方式声明。
ngModel 指令会自动将表单控件的值转换成字符串类型，如果需要将其转换成其他类型，需要使用相应的转换器。
ngModel 指令不支持在组件类中直接使用，只能通过输入属性的方式进行绑定。
总结
ngModel 是 Angular 中一种常用的表单控件数据绑定方式，可以实现双向数据绑定，使得表单控件中的值与组件中的属性保持同步。在使用 ngModel 时，需要注意其使用方式和注意事项，以避免出现问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65533760d2f5e1655dced791