JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Buttons Group of radio buttons in a Angular react form – how to retrieve value of radio

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102103
    davout
    Member
    Up
    0
    Down

    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?

    #102111
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102147
    davout
    Member
    Up
    0
    Down

    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’

    #102148
    davout
    Member
    Up
    0
    Down

    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>

     

    #102151
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102154
    davout
    Member
    Up
    0
    Down

    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
     

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.