Angular: обновление ControlValueAccessor для всех компонентов, которые используют один и тот же formControlName

Question

Я надеюсь, что это изображение объясняет, что я хочу сделать.

Поэтому я хочу сделать пользовательский компонент радио, который имеет тот же formControlName. При щелчке радиоприемника остальные компоненты, имеющие одинаковое имя formControlName, должны обновиться с активным значением.

Как мне это сделать?

Answer 1

Я проверил поведение только с разделением formControlName между несколькими входами, и оно не обновляется только на основе этого атрибута привязки. Похоже, или обходной путь, ngModel (только с v5 или старше) или функция требуется для завершения желаемого поведения. Закрытый выпуск и подробный диалог доступны здесь:

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

Наиболее заметно:

Общие элементы управления формой поддерживаются только сейчас для естественно сгруппированных элементов управления, таких как переключатели (которые имеют общий реестр). Для элементов управления совместным использованием текстового ввода ngModel - единственный вариант, если вы хотите, чтобы они были синхронизированы. Мы вряд ли добавим эту функциональность к реактивным формам с учетом обходного пути, поэтому закрытие. Если вы считаете, что есть вариант использования для этого, который не может быть решен каким-либо другим способом, пожалуйста, не стесняйтесь открыть вопрос с дополнительной информацией о вашем сценарии использования.

Но есть комментарии с обходными путями.

Временное решение

Самое привлекательное существо:

пользовательская директива для принудительного обновления [FormControl] и [FormControlName] при обновлении FormControl.

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

функция

Вы можете создать функцию в компоненте, которая устанавливает значение для вашего formControl:

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

и выполните событие on click, которое вызывает функцию:

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