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