javascript - Angular：ControlValueAccessor 更新到共享相同 formControlName 的所有组件

Question

我希望这张图片能解释我想要做什么。

所以我想做一个共享相同formControlName的自定义无线电组件。单击单选时，共享相同 formControlName 的其余组件应更新为活动值。

我该怎么做？

score 1 · Accepted Answer

我已经测试了仅在多个输入之间共享 formControlName 的行为，并且它不会仅基于此绑定属性进行更新。看起来需要解决方法、ngModel（仅限 v5 或更早版本）或函数来完成所需的行为。此处提供了一个已关闭的问题和一些详细的对话框：

最为显着地：

共享表单控件目前仅支持自然分组的控件，如单选按钮（具有共享注册表）。对于文本输入共享控件，如果您希望同步它们，ngModel 是唯一的选择。考虑到解决方法，我们不太可能将此功能添加到反应式表单中，因此关闭。如果您觉得有一个用例无法以任何其他方式解决，请随时使用有关您的用例的更多信息打开一个问题。

但是有一些评论带有解决方法。

最吸引人的是：

当 FormControl 更新时强制 [FormControl] 和 [FormControlName] 更新的自定义指令。

您可以在组件中创建一个函数，将值设置为您的 formControl：

setControl(value){
    this.form.controlName = value
}

并执行一个调用该函数的点击事件：

<input type="radio" formControlName="controlName" (click)="setControl(x)">

1 回答 1