Angular react 形式 : sync multiple inputs with a single formControlName

Question

我正在构建一个 reactive form在 Angular 11 中。它分为多个 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 来实现这一点，这样我就可以利用 formGroup(而不是让每个表单控件成为我的组件对象的成员)。但是，缺少对实际 myCtrl 的引用会破坏 [value] 处的绑定(bind)。

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

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