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

[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>