时间戳

首页 > 解决方案 > Angular 反应式表单：使用单个 formControlName 同步多个输入

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

问题描述

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

我喜欢corylan 的方法：

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

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

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

标签： angularangular-reactive-formsangular11

解决方案

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

<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

推荐阅读