0

There are a few questions that touch upon this issue but none answers this issue specifically:

Angular 5 Reactive Forms - Radio Button Group

Angular reactive forms radio button group

Basically, the radio buttons work in the reactive form until I add the formControlName, which is needed for Reactive Forms

Here's the Stackblitz to fiddle with:

Stackblitz

The idea here is when I click on each radio button, I can see the value change in the log I created below, which would indicate to me that the formControl is working properly.

EDIT:

Here is a Stackblitz where I am doing the same thing without the reusable component and it works fine. Why doesn't it work when I convert the radio button into a reusable component?

Stackblitz - Without Reusable Radio Button Component

Khepf
  • 352
  • 1
  • 4
  • 24
  • If you want a custom component to act as a form control, you can implement the ControlValueAccessor interface on that component. – MikeOne May 26 '22 at 14:50
  • `ControlValueAccessor` is the best way to achieve what you're trying to accomplish. However, I have made some changes to your example code. you can check [here](https://stackblitz.com/edit/angular-ivy-7osed2?file=src%2Fapp%2Fradio-button%2Fradio-button.component.html,src%2Fapp%2Fradio-button%2Fradio-button.component.ts,src%2Fapp%2Fapp.component.html) – Empty Brain May 26 '22 at 15:39

1 Answers1

0

First of all, your component shouldn't be a radio but a checkbox!

as you can read here

Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.

whereas the behaviour you seek is that of checkbox, as you can read here

Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

i strongly recomend you to follow the web standard, for a better Web!

Then the angular part.

Angular provides an interface called ControValueAccessor, which gives you access to the native methods of form controls, allowing you to turn any component into a formControl! Amazing. I'll show you an example

this will be your customComponent:

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CustomComponent,
      multi: true
    }]
})

export class CustomComponent implements ControlValueAccessor {
  field= "";

  constructor() { }

  onChange: any = () => {}
  onTouch: any = () => {}

  // sets the value used by the ngModel of the element
  set value(val: string){
      this.field = val
      this.onChange(val)
      this.onTouch(val)
  }

  // This will will write the value to the view if the the value changes occur on the model programmatically
  writeValue(value: any){
    this.value = value
  }

  // When the value in the UI is changed, this method will invoke a callback function
  registerOnChange(fn: any){
    this.onChange = fn
  }

  // When the element is touched, this method will get called
  registerOnTouched(onTouched: Function) {
    this.onTouch = onTouched;
  }
}

and then you can do something like this:

//app.component.ts
form = new FormGroup({
 customInput: new FormControl()
})

and in the html:

 <form [formGroup]="form" >
    <app-custom formControlName="customInput"></app-custom>
  </form>

this is a very simple example about control value accessor.

here you can find a deeper explanation

here you can read about the interface

Dario
  • 364
  • 2
  • 9