Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › General Discussions › Buttons › Group of radio buttons in a Angular react form – how to retrieve value of radio › Reply To: Group of radio buttons in a Angular react form – how to retrieve value of radio
August 25, 2021 at 1:25 pm
#102148
Member
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>