Angular 反应式表单：使用单个 formControlName 同步多个输入答案

【问题标题】：Angular reactive forms: sync multiple inputs with a single formControlNameAngular 反应式表单：使用单个 formControlName 同步多个输入
【发布时间】：2021-09-21 15:42:43
【问题描述】：

我正在 Angular 11 中构建reactive form。它被拆分为多个 div，项目所有者希望在每个 div 中重复输入一些内容，以便用户可以编辑某些字段 A 的输入，并且字段 A 的所有 div 输入都将显示更新后的值。

我喜欢corylan's approach：

<input [formControl]="myCtrl" [value]="myCtrl.value" />
<input [formControl]="myCtrl" [value]="myCtrl.value" />
<input [formControl]="myCtrl" [value]="myCtrl.value" />

...但我想用formControlName 而不是formControl 来实现这一点，这样我就可以利用formGroups（而不是让每个表单控件成为我的组件对象的成员）。但是，缺少对实际 myCtrl 的引用会破坏 [value] 的绑定。

我是否有一个好的策略来仅按名称指定表单控件并且所有这些输入都使用单个控件？或者当有很多不同的集合要同步时，是否有不同的好方法来同步 Angular 反应形式的输入？

【问题讨论】：

我可以试试FormArray
@akkonrad 有点像，但有两个问题：(1) 除非我使用适合数组的输入，否则使用 FormArray 会使周围的组件变脆。（如果我需要添加或删除一个元素，则所有后续元素的索引都需要更改。如果我们的一个 html/css 人员添加/删除一个输入，他将不知道为什么一切都坏了，并且（ 2）我的 ng 应用程序仍然无法编译，因为我的输入在某些控件之前存在。

标签： angular angular-reactive-forms angular11

【解决方案1】：

这可以通过设置表单控件的实际值来实现。

<form [formGroup]="searchForm">
  <input placeholder="search" formControlName="search" [value]="searchForm.value.search" />
  <input placeholder="search" formControlName="search" [value]="searchForm.value.search" />
  <input placeholder="search" formControlName="search" [value]="searchForm.value.search" />
</form>

堆栈闪电战：https://stackblitz.com/edit/angular-y6gxf6?file=src%2Fapp%2Fapp.component.html

【讨论】：

好答案。我要补充一点，您也可以将 searchForm.value.search 用于 value 属性。