Angular 是一款流行的前端框架，它为我们提供了许多强大的功能来构建现代化的 Web 应用程序。在 Angular 的模板中，我们常常需要获取表单输入框的值，以便进行后续的处理。在本文中，我们将学习如何使用 ngModel 来获取表单输入框的值。
什么是 ngModel？
ngModel 是 Angular 中一个非常重要的指令，它用于将表单元素的值绑定到组件中的变量，并且实现双向数据绑定。通过使用 ngModel 指令，我们可以轻松地跟踪表单元素的值的变化，并在组件中处理这些值。
如何使用 ngModel？
我们可以在表单元素上使用 ngModel 指令来实现双向数据绑定。下面是一个简单的示例：
<input [(ngModel)]="name" placeholder="Enter your name">
在上面的示例中，我们将一个输入框的值绑定到了组件中的 name 变量。当用户在输入框中输入内容时，name 变量的值会随之改变。反之，当在组件中修改 name 变量的值时，输入框中的内容也会随之改变。
我们也可以为 ngModel 指令传递参数，以控制其行为。比如，我们可以通过设置 ngModelChange 事件来监听输入框值的变化：
<input [(ngModel)]="name" (ngModelChange)="onNameChange()" placeholder="Enter your name">
在上面的示例中，我们添加了一个 onNameChange() 方法，当输入框的值改变时会自动调用这个方法。
获取表单元素的值
在我们的组件中，我们可以轻松地获取表单元素的值。在上面的示例中，我们可以通过访问组件中的 name 变量来获取输入框的值。这种方式适用于单个表单元素。
如果我们需要访问多个表单元素的值，我们可以使用 Angular 的表单模块。表单模块提供了一些有用的功能来帮助我们轻松地获取和验证表单数据。
我们可以在组件类中导入 FormsModule 模块来使用表单模块的功能。下面是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
-------- -------
---------- -
---------- ----- --- ------- --- - - --------------
-
-在上面的示例中，我们导入了 FormsModule 模块，并在组件类中定义了一个 myValue 变量。当用户在输入框中输入内容并提交表单时，我们就可以通过调用 onSubmit() 方法来获取输入框的值。
总结
在本文中，我们学习了如何使用 ngModel 来获取表单元素的值。通过这种方式，我们可以轻松地跟踪表单元素的值的变化，并在组件中处理这些值。如果需要访问多个表单元素的值，我们可以使用 Angular 的表单模块来处理。我希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dee3def6b2d6eab3a09326