Angular ng-module

在 Angular 中，ngModel 通过引用而不是值来存储变量。模型绑定是输入对象（例如日期）或集合（例如数组）。

创建的 Phone 对象有几个用于验证目的的字段。我们列出重要的字段。

• ng-touched
• ng-untouched
• ng-pending
• ng-pristine
• ng-valid
• ng-invalid
• ng-dirty

使用 getter 和 setter 绑定 ngModel

每当函数以零参数调用时，它表示模型。当带参数调用时，它设置值。因此 ngModel 指的是地址；它不会将更改的值保存到对象。相反，它将其保存在内部状态（变量名.值）中。

当存在内部表示时，为模型使用 getter 和 setter 会很有用，因为 getter 和 setter 函数在代码中更常用。

语法

示例

我们已通过字符串 *Javatpoint* 初始化了 name，并通过空字符串初始化了 name1。

性质

FormControl 跟踪控件的值、用户交互和验证状态，以使视图与模型保持同步。如果它用作父级，则该指令也会将自身注册。

如果使用 [()] 进行双向绑定，则 UI 中的语法值总是同步回类的域模型。

要检查关联的 FormControl，请使用 NgModel 作为键将指令导出到本地模板变量。最常用的直接访问控制资产也存在。请参阅 AbstractControlDirective 中可用属性的完整列表。

在独立控件上使用 ngModel

这些示例展示了一个使用 ngModel 的简单独立控件

在 <form> 标签中使用 ngModel 时，您还需要提供一个 name 属性，以在该名称下将控件注册到父表单。

在表单提交时，根据需要使用变量。在父表单的上下文中，通常不需要包含单向或双向绑定，因为父表单会为您同步值。如果您需要在表单中填充初始值，只要您使用导出的表单的值而不是提交时域模型的值，使用 ngModel 的单向绑定就足够了。

在表单中使用 ngModel

在组内使用独立的 ngModel

该示例向我们展示了在表单中使用独立的 ngModel 控件。它控制表单的显示，但不包含表单数据。

通过选项设置 NgModel 名称属性

此处，在自定义表单控件组件中使用了标识为 name 的属性。

NgModel

从域模型创建一个 FormControl 实例，并将其绑定到 FormControl 元素。

描述

FormControl 实例跟踪控件的值、用户交互和验证状态，并使视图与模型保持同步。如果用作父级，则该指令也会将自身注册为子控件。

该指令接受域模型作为可选输入。如果您使用 [] 语法对 NgModel 进行单向绑定，则在组件类中更改域模型的值会设置视图中的值；如果您使用 [()] 语法对 UI 中的值进行双向绑定，则会同步回类的域模型。

要检查关联的 FormControl，请使用 NgModel 作为键将指令导出到本地模板变量。然后，您可以使用指令的 Control 属性访问控件。

在独立控件上使用 ngModel

这些示例展示了一个使用 NgModel 的独立控件

当我们在 <form> 标签中使用 NgModel 时，您需要提供一个 name 属性，以在该名称下将控件注册到父表单。

如果您需要在表单中填充初始值，只要您使用导出的表单的值而不是顶点处的域模型的值，使用 NgModel 的单向绑定就足够了。

在组内使用独立的 ngModel

该示例向您展示了表单中的一个独立 ngModel 控件。它控制表单的显示，但不能包含表单数据。

通过选项设置 ngModel 名称属性

自定义表单控件组件中使用了标识为 name 的属性。要能够指定 NgModel 的名称，您必须使用 ngModelOptions 输入来指定它。