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

Question

我希望这张图片能解释我想做的事情。

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

我该怎么做？

Answer 1

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

https://github.com/angular/angular/issues/10036

最为显着地：

目前仅支持自然分组的控件（例如单选按钮（具有共享注册表））的共享表单控件。对于文本输入共享控件，如果您希望它们同步，那么 ngModel 是唯一的选择。考虑到解决方法，我们不太可能将此功能添加到反应式表单中，因此结束。如果您认为存在无法通过其他方式解决的用例，请随时提出问题，并提供有关您的用例的更多信息。

但有评论提出了解决方法。

解决方法

最吸引人的是：

一个自定义指令，用于在 FormControl 更新时强制 [FormControl] 和 [FormControlName] 进行更新。

https://gist.github.com/Dyljyn/59e95fbe09a24b1835667a1a5e401e5a

功能

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

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

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

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