Group of radio buttons in a Angular react form – how to retrieve value of radio

[davout]

I have a set of ‘smart-radio-button’ components defined in my Angular 10 React form
I can’t work out how to set the starting selection and when I click on a radio button the angular Form Group control has a value of ‘true’ rather than the value assigned to the button

<smart-radio-button class="recurring-interval-radio"
                    [value] = "'0'"
                    [groupName]="recurringInterval"
                    formControlName="recurringInterval"
                    (change)="onRecurringIntervalChange('0')">None
</smart-radio-button>
<smart-radio-button class="recurring-interval-radio"
                    [groupName]="recurringInterval"
                    formControlName="recurringInterval"
                    [value]= "'1'"
                    (change)="onRecurringIntervalChange('1')">Daily
</smart-radio-button>
<smart-radio-button class="recurring-interval-radio"
                    [groupName]="recurringInterval"
                    formControlName="recurringInterval"
                    [value]="'2'"
                    (change)="onRecurringIntervalChange('2')">Weekly
</smart-radio-button>
<smart-radio-button class="recurring-interval-radio"
                    [groupName]="recurringInterval"
                    formControlName="recurringInterval"
                    [value]="'3'"
                    (change)="onRecurringIntervalChange('3')">Monthly
</smart-radio-button>
<smart-radio-button class="recurring-interval-radio"
                    [groupName]="recurringInterval"
                    formControlName="recurringInterval"
                    [value]="'4'"
                    (change)="onRecurringIntervalChange('4')">Yearly
</smart-radio-button>

Can you please provide a small example of a group of radio buttons working in a react form?

[YavorDashev]

Hi davout,
AS from you post I suggest that you want to get the value of the smart-radio-button component and not its boolean value.
If so you can do so using the change event and using you method:

//In your app.component.ts file
  onRecurringIntervalChange(event:any):void {
    let radioButtonValue: EventTarget = event.target.value;
    console.log(radioButtonValue)
  }
 

And for the starting selection it depends on which of the radio buttons you set the checked property and if you don’t set it to either of them none of them will be selected.
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[davout]

I am using Angular reactive forms, where I pushing data into the controls programmatically using ‘setValue’ and ‘patchvalue’.
Neither of those methods seems to work for ‘smart-redio-button’

[davout]

I’ve created a version of my form using basic input type=radio,   and that works.
Using your ‘smart-radio-button’ component it does not work
 

                  <div class="recurring-intervals">
<!--                    <div style="margin-left: 5px; margin-top: 5px; overflow: visible">-->
<!--                      <input type="radio" id="recurringIntervalNone"-->
<!--                             value="0" name="includeRecurringTasks" formControlName="recurringInterval">-->
<!--                      <label for="recurringIntervalNone">None</label>-->
<!--                    </div>-->
<!--                    <div style="margin-left: 5px; margin-top: 5px; overflow: visible">-->
<!--                      <input type="radio" id="recurringIntervalDaily"-->
<!--                             value="1" name="includeRecurringTasks" formControlName="recurringInterval">-->
<!--                      <label for="recurringIntervalDaily">Daily</label>-->
<!--                    </div>-->
<!--                    <div style="margin-left: 5px; margin-top: 5px; overflow: visible">-->
<!--                      <input type="radio" id="recurringIntervalWeekly"-->
<!--                             value="2" name="includeRecurringTasks" formControlName="recurringInterval">-->
<!--                      <label for="recurringIntervalWeekly">Weekly</label>-->
<!--                    </div>-->
<!--                    <div style="margin-left: 5px; margin-top: 5px; overflow: visible">-->
<!--                      <input type="radio" id="recurringIntervalMonthly"-->
<!--                             value="3" name="includeRecurringTasks" formControlName="recurringInterval">-->
<!--                      <label for="recurringIntervalMonthly">Monthly</label>-->
<!--                    </div>-->
<!--                    <div style="margin-left: 5px; margin-top: 5px; overflow: visible">-->
<!--                      <input type="radio" id="recurringIntervalYearly"-->
<!--                             value="4" name="includeRecurringTasks" formControlName="recurringInterval">-->
<!--                      <label for="recurringIntervalYearly">Yearly</label>-->
<!--                    </div>-->
                                        <smart-radio-button class="recurring-interval-radio"
                                                            value = "0"
                                                            [groupName]="recurringInterval"
                                                            formControlName="recurringInterval"
                                                            (change)="onRecurringIntervalChange('0')">None
                                        </smart-radio-button>
                                        <smart-radio-button class="recurring-interval-radio"
                                                            [groupName]="recurringInterval"
                                                            formControlName="recurringInterval"
                                                            value= "1"
                                                            (change)="onRecurringIntervalChange('1')">Daily
                                        </smart-radio-button>
                                        <smart-radio-button class="recurring-interval-radio"
                                                            [groupName]="recurringInterval"
                                                            formControlName="recurringInterval"
                                                            value="2"
                                                            (change)="onRecurringIntervalChange('2')">Weekly
                                        </smart-radio-button>
                                        <smart-radio-button class="recurring-interval-radio"
                                                            [groupName]="recurringInterval"
                                                            formControlName="recurringInterval"
                                                            value="3"
                                                            (change)="onRecurringIntervalChange('3')">Monthly
                                        </smart-radio-button>
                                        <smart-radio-button class="recurring-interval-radio"
                                                            [groupName]="recurringInterval"
                                                            formControlName="recurringInterval"
                                                            value="4"
                                                            (change)="onRecurringIntervalChange('4')">Yearly
                                        </smart-radio-button>
                  </div>

 

[admin]

Hi davout,
We cannot reproduce an issue with the provided details. If you share a stackblitz sample which shows your scenario and the behavior which you report, we will try it once again.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[davout]

I’m new to this  developer area,  how do I create a StackBlitz example?
I can’t see why you don’t have a stackblitz demo for every component in this product
 

[Author]

Posts