有多少指令使用 ngModel 作为输入，有多少指令使用它作为选择器？

Question

在对两个 Angular 表单模块（FormsModule 和 ReactiveFormsModule）进行逆向工程后，我统计了 ngModel 的三种用途作为指令中的输入。

在 FormsModule 中，ngModel 在 NgModel 指令中使用一次。 ngModel 是指令选择器的一部分（选择器：'[ngModel]:not([formControlName]):not([formControl])'）。因此，对于 NgModel 指令，ngModel 有两个角色。它是一个输入，同时也是一个选择器。

在 ReactiveFormsModule 中，ngModel 被使用了两次。第一次使用是在 FormControlDirective 中（选择器：'[formControl]'）。 第二个，在 FormControlName 指令中（选择器：'[formControlName]'）。在这两种情况下，ngModel 都是一个简单的输入，它不是指令选择器的一部分。

这三个事件允许将 FormControl 绑定到模型。但是，第一个有另一个副作用：它还在将 FormControl 绑定到模型之前创建它。

还有其他用途吗？我错过了其他人吗？

Answer 1

[(ngModel)] 主要用作双向绑定，这意味着您可以将其值传递给 TS 或 JS 文件中的变量。 我给你举个例子。

<input [(ngModel)]="array.test"</input>

将为您的 JSON 数组提供一个属性测试，其中包含您输入中写入的值。

希望这会有所帮助。

Answer 2

有多少指令使用 ngModel 作为输入，有多少指令使用 它作为选择器？

以下指令使用ngModel 作为输入绑定：

反应形式：

• formControl
• formControlName

模板驱动的表单：

• ngModel

以下指令使用ngModel 作为选择器：

• NgModel 模板驱动指令
• 具有各自属性的所有内置验证器：[required][ngModel]、[email][ngModel]、[minlength][ngModel] 等。
• 所有内置控制值访问器，如DefaultValueAccessor、NumberValueAccessor 等。在此处深入了解ControlValueAccessor：Never again be confused when implementing ControlValueAccessor in Angular forms
• NgControlStatus 自动应用于 Angular 表单控件，这些控件根据控件状态设置 CSS 类 ng-valid、ng-pending 等