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

我正在建造一个反应形式 https://angular.io/guide/reactive-forms在 Angular 11 中。它分为多个 div，项目所有者希望在每个 div 中进行一些重复输入，以便用户可以编辑某个字段 A 的输入，并且字段 A 的所有 div 输入都将显示更新后的值。

I like 科里兰的方法 https://coryrylan.com/blog/syncing-multiple-reactive-form-inputs-in-angular:

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

...但我想实现这一目标formControlName代替formControl这样我就可以利用formGroups（并且不是让每个表单控件都是我的组件对象的成员）。但缺乏对实际情况的参考myCtrl会破坏绑定[value].

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

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

<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 https://stackblitz.com/edit/angular-y6gxf6?file=src%2Fapp%2Fapp.component.html