Why does my Blazor form not get any value from input field?

Question

I have been using Blazor and I encountered an issue could not find any solution. I have been trying to add text into input fields but it's not updating.

@page "/"

<PageTitle>Form</PageTitle>

<h1 style="text-align:center">Form & Validation</h1>

<EditForm Model="person" OnValidSubmit="FormSubmit" FormName="Form">
    <DataAnnotationsValidator />
    <label>Name :</label>
    <InputText id="name" @bind-Value="person.Name" />

    <br />
    <br />

    <button type="submit" class="btn btn-primary">submit</button>
</EditForm>

<p>New Name : @person.Name</p>


@code {
    Person person = new Person();
    string displaySuccess, styleColor;

    private void FormSubmit()
    {
        displaySuccess = "Worked!";
        styleColor = "Green";
    }

    class Person
    {
        public string? Name { get; set; }
    }
}

I tried

private void FormSubmit()
{
        if (person != null)
        {
            displaySuccess = "Worked!";
            styleColor = "Green";
        }
        else
        {
            displaySuccess = "Wrong!";
            styleColor = "red";
        }
}

Then it always shows "Worked!" even though it was null what is happening?

I tried looking up on Google didn't find anything dunno why my value is not getting updated

Gweam · Accepted Answer · 2024-08-19 22:17:23Z

1

So after reading and diving furthur finidng out a more efficient and this time more of a working way is to this

@page "/"
@inject ILogger<Home> Logger

<EditForm Model="person" OnSubmit="Submit" FormName="Person">

    <label>Name: </label>
    <InputText placeholder="Name" @bind-Value="person!.Name" />

    <br />
    <br />

    <label>Age: </label>
    <InputNumber placeholder="Age" @bind-Value="person!.Age" />

    <br />
    <br />

    <label>Address: </label>
    <InputText placeholder="Address" @bind-Value="person!.Address" />

    <br />
    <br />

    <button type="submit" class="btn btn-primary btn-rounded">Submit</button>

</EditForm>

<br />
<br />

<p>Name : @person.Name</p>
<p>Age : @person.Age</p>
<p>Address : @person.Address</p>

@code {
    [SupplyParameterFromForm]
    public Person? person { get; set; }

    protected override void OnInitialized() => person ??= new();

    private void Submit()
    {
        //can add anything here
    }

    public class Person
    {
        public string? Name { get; set; }

        public int? Age { get; set; }

        public string? Address { get; set; }
    }
}

instead of Person person = new Person(); i can do protected override void OnInitialized() => person ??= new();

which fixes the issue for me :D

edited Aug 19, 2024 at 22:17

answered Aug 19, 2024 at 22:02

Gweam

213 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrC aka Shaun Curtis Over a year ago

It looks like you're statically rendering the page. The fix was in adding [SupplyParameterFromForm] public Person? person { get; set; } and then making sure it had a value in OnInitialized.

hossein andarkhora Sep 9 at 9:29

The corrected part of my code is : [SupplyParameterFromForm] public FormModel? formModel { get; set; } protected override void OnInitialized() => formModel ??= new(); Thanks a lot

Collectives™ on Stack Overflow

Why does my Blazor form not get any value from input field?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related