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)">