Проблемы с доступом к значению в компоненте переключателя

Question

Итак, я пытаюсь сделать действительно простой и чистый компонент переключателя, который можно использовать с методом доступа к значению, который будет использоваться в общих сценариях угловых форм с FormsModule, ReactiveFormsModuleи используя changeDetectionStrategy.OnPushно я столкнулся с проблемой (проблемами), которую вы можете увидеть НА ЭТОМ Stackblitz, где я получаю неожиданные результаты, которые, как я понимаю, вероятно, я что-то упускаю, так как я уже давно не делал собственное радио.

Когда он впервые загружается, вы получаете контуры радио, но не метки, пока не щелкнете что-нибудь и writeValueа также onModelChangeне определены , пока я получаю No value accessor for form control with name:ошибка. Так что мог бы использовать другую пару глаз, чтобы я мог использовать экземпляр со старыми хорошими ngModel, formControlName, FormBuilder.

Вы увидите в Stackblitz метод доступа к значениям, который реализует ControlValueAccessorпоэтому я немного сбит с толку, так как недавно я сделал тот же подход с другим компонентом. Я мог бы скопировать/вставить части блица сюда, но решил, что примера должно быть достаточно, если не просто дайте мне знать.

Answer 1

Я внес несколько изменений в ваш код на Stackblitz, пожалуйста, проверьте и дайте мне знать, решит ли это вашу проблему.

Ниже приводится сводка сделанных изменений:

• Представлено новое свойство RadioButtonComponent с именем internalValueи использовал его для привязки к [ngModel]. Также обновляя его значение в writeValue()метод.
• Прокомментировал код внутри writeValueотносится к this.checkedи ручное обновление до inputэлемент checkedимущество. Это должно автоматически обрабатываться API Angular Forms.
• В HTML-шаблоне RadioButtonComponent удален [attr.checked]привязка и вместо использования привязки атрибута для nameа также value, просто использовал привязку свойства.
• В app.component.html вместо использования привязки свойств используется двусторонняя привязка. [(ngModel)]синтаксис, так что значение будет отражено, когда вы печатаете его с помощью ngModel: {{testing}}

Вы также можете изменить/настроить другие вещи, но, надеюсь, приведенные выше изменения помогут вам начать работу.

Answer 2

      providers: [RADIO_VALUE_ACCESSOR]

Вам не хватает этого в вашем коде. Вам нужно добавить это в провайдеров в компонентном декораторе