错误：ngModel 与 FormGroup 中的 formControlName 不一致 - 在 Angular 中修复
在 Angular 中，表单是一个非常重要的组成部分，而表单数据的处理也是一个挑战。然而有时候当我们使用 FormGroup 和 ngModel 来处理表单数据时，可能会出现这样的错误: ngModel 与 FormGroup 中的 formControlName 不一致。这个错误可能会导致表单数据无法正确提交或者被重置，因此我们需要找出原因，并进行修复。
问题描述
在 Angular 中，我们通常是使用 FormGroup 和 FormControl 来处理表单数据。而在某些情况下，我们可能还会同时使用 ngModel 来进行双向绑定。但是，在一些场景下，可能会出现 ngModel 和 FormGroup 中的 formControlName 不一致的情况，如下所示：
<form [formGroup]="myForm"> <input type="text" formControlName="name" [(ngModel)]="user.name" /> <input type="text" formControlName="email" [(ngModel)]="user.email" /> </form>
其中，ngModel 和 FormGroup 中的 formControlName 对应的是同样的属性（name 和 email），但当我们在控制台中查看表单数据时，却发现表单数据并没有正确地被绑定。 这是为什么呢？
原因分析
首先，我们需要了解一下 FormGroup 和 ngModel 是如何工作的。
FormGroup 是一个控制一个表单的抽象类，它实现了一个表单的基本行为，例如检查表单数据的有效性等。而 FormControl 是 FormGroup 中的一个子类，它代表了一个表单控件，例如一个输入框或者复选框。
而 ngModel 则是 Angular 中用于双向绑定的一个指令。在表单中使用 ngModel 可以实现将数据从组件中的属性传递到模板中进行展示，也可以通过模板中的输入控件实时更新组件中的属性值。这样就可以实现一个完整的双向绑定过程。
然而，当我们在 FormGroup 中定义了 formControlName 的时候，它会为该字段创建一个 FormControl。当这个 FormControl 和 ngModel 都被绑定到同一个属性时，就会发生这个错误。这是因为 ngModel 和 FormControl 会尝试同时对同一个属性进行绑定，但实际上，组件中的属性对应的是 FormControl，而不是 ngModel，所以数据就无法正确地传递和展示了。
解决方案
为了解决这个问题，我们需要一些技巧。我们可以将 ngModel 和 FormControl 绑定到不同的属性上，如下所示：
<form [formGroup]="myForm"> <input type="text" formControlName="name" [(ngModel)]="nameValue" /> <input type="text" formControlName="email" [(ngModel)]="emailValue" /> </form>
现在，ngModel 和 FormControl 分别绑定到了 nameValue 和 emailValue 这两个属性上，这样就避免了冲突。
同时，我们需要在组件中定义这两个属性，并在 ngOnInit() 函数中将 FormGroup 和 FormControl 绑定到这些属性上。
-- -------------------- ---- -------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- ---------- ------ -
---------- -------
----------- -------
------ - --- -----------
----- --- --------------
------ --- -------------
---
----------- ---- -
----------------------------------------------------- -- -
-------------- - -----
---
------------------------------------------------------- -- -
--------------- - ------
---
-
-在以上代码中，我们使用 FormGroup 的 get() 函数获取了我们在模板中定义的控件，并通过 valueChanges 订阅了控件值的变化，将变化后的值赋值给了组件中新定义的两个属性。这样，我们就成功地将 FormGroup 和 FormControl 中的表单数据同步到了组件中的属性中，而 ngModel 也能正常工作了。
总结
在使用 Angular 编写表单时，需要更加细心和谨慎。在处理表单数据时，要注意 ngModel 和 FormGroup 中的 formControlName 是否冲突。如果出现冲突，需要考虑使用不同的属性来区分它们，并注意同步它们之间的值。这样才能确保在使用提交表单时，数据被正确地处理和提交。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc701cf6b2d6eab3227733