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

Question

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

<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

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

Angular reactive forms: sync multiple inputs with a single formControlName

angular

angular-reactive-forms

angular11