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

Question

我正在 Angular 11 中构建一个反应式表单。它分为多个 div，项目所有者希望在每个 div 中进行一些重复输入，以便用户可以编辑某个字段 A 和所有 div 的输入' 字段 A 的输入将显示更新后的值。

我喜欢科里兰的方法：

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

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

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

Answer 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>

STACKBLITZ：https://stackblitz.com/edit/angular-y6gxf6 ?file=src%2Fapp%2Fapp.component.html