Q & A Blazor: Two-way data binding with Radio Button

Question

I am writing a blazor app, where the user has to select a group of options in the form of a radio buttons. This selection needs to be done inside a component. Which also meant, I needed to pass data from a radio group in a child component to a parent component.

The Test

Below are code snippets for both child and parent components. The test involves selecting one of the four seasons (spring, summer, autum, and winter) in the child component. When the user selects any of the four seasons, that selection needs to be updated in the parent component as well.

Attempt
First attempt was to use an Editform.

This is the child component. Pages\Child.razor

<h1>Child</h1>

EditForm Model="model">
    <InputRadioGroup @bind-Value="SelectedValue">
        @foreach (var revOption in (Season[])Enum
        .GetValues(typeof(Season)))
            {
                    <InputRadio Value="@revOption" @onchange="@UpdateSelection"/>
                <text>&nbsp;</text>
                @revOption <text>&nbsp;</text>
            }
    </InputRadioGroup>
    <p>Selected Season inside Child: @SelectedValue</p>
    
    
</EditForm>

@code {
    [Parameter]
    public string SelectedValue { get; set; } = "No seasons selected.";

    [Parameter]
    public EventCallback<string> TestEvent { get; set;  }

    Model model = new Model();

    class Model
    {
        public Season Season { get; set; }
    }

    enum Season
    {
        Spring,
        Summer,
        Autumn,
        Winter
    }

    private async Task UpdateSelection()
    {
        SelectedValue = model.Season.ToString();
        await TestEvent.InvokeAsync(SelectedValue);
    }
}

and the parent component index.razor

<h1>Parent</h1>

<Child TestEvent=@UpdateChildSeason />

<p>Season data from Child: @ChildSeason</p>

@code
{
    string ChildSeason;

    void UpdateChildSeason(string value)
    {
        ChildSeason = value;
    }
}

This does not work properly. I not pass the data to the parent

p.s. At the same time, if I select any of the radio buttons, all of the radio buttons will be cover in green buttons.

I have no idea why that happens.

Answer 1

So, the solution I have is to not use EditForm. Well, since I am not worried about data validation, I can do away with EditForm for now.

Here is my solution.

This is the child component. Pages\Child.razor

<p>Please select your choice.</p>
@foreach (var seasonOption in (Season[])Enum
   .GetValues(typeof(Season)))
{
    <label>
        <input type="radio"
           name="seasonOption"
           value="@seasonOption"
           onchange="@OnValueChanged" />
        @seasonOption.ToString()
    </label>   
}
<br />
<p>SelectedValue: @SelectedValue</p>


@code {

    [Parameter]
    public string SelectedValue { get; set; } = "No season selected.";

    [Parameter]
    public EventCallback<string> SelectedValueChanged { get; set; }
    enum Season
    {
        Spring,
        Summer,
        Autumn,
        Winter
    }

    private Task OnValueChanged(ChangeEventArgs e)
    {
        SelectedValue = e.Value.ToString();
        return SelectedValueChanged.InvokeAsync(SelectedValue);
    }

}

and the parent component index.razor

<Child2 @bind-SelectedValue="childData" />

<p>Data from Child: @childData</p>

@code
{
    string childData = "No child data.";
}

Now, the data is finally passed to the parent. This will work for me now. Does anyone have a solution for the EditForm version and how to remove that green boxes from the radio buttons?

Answer 2

It's only a Css issue.

If you inspect the element you'll see:

<input class="modified valid" type="radio" name="81920f03ae5d4345bf72369b58ea59e1" value="Autumn" _bl_7ea09091-cc5a-4fb1-977c-dd45c318c204="">

Note the valid which gives a green box around normal input elements when the entered data is valid. It's part of the Css formatting created in InputBase.

The problem is the Css that styles this is (site.css: line 29) :

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

It doesn't exclude Radio.

There are various ways to solve this. This works:

.valid.modified:not([type=checkbox, radio]) {
    outline: 1px solid #26b050;
}