Blazor editform only the submit button works

Question

I have this blazorform, the only button that works is the submit/save button.

As you can see, I have tried with some variants of the Add phone button, but none of the buttons calls their associated methods, -except the submit button.

Otherwise the page works as expected, I'm completely stumped. There is nothing to see in the console.

@page "/editaddress/{id?}"
@using addressbook.Models
@using Microsoft.IdentityModel.Tokens
@inject HttpClient Http
@inject NavigationManager NavigationManager

<h3>@(isEdit ? "Edit Address" : "Add Address")</h3>

<EditForm Model="_newAddress" OnValidSubmit="HandleValidSubmit" FormName="EditPerson">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>First Name:</label>
    <InputText @bind-Value="_newAddress.FirstName" />
    <br />

    <label>Last Name:</label>
    <InputText @bind-Value="_newAddress.LastName" />
    <br />

    <label>Birthday:</label>
    <InputDate @bind-Value="_newAddress.Birthday" />
    <br />

    <label>Emails:</label>
    @if (_newAddress.Emails == null || !_newAddress.Emails.Any())
    {
        <p>No emails added. <button type="button" @onclick="AddEmail">Add Email</button></p>
    }
    else
    {
        @foreach (var email in _newAddress.Emails)
        {
            <div>
                <InputText @bind-Value="email.Value" placeholder="Email Address" />
                <InputText @bind-Value="email.Label" placeholder="Label (e.g., Work, Personal)" />
                <button type="button" @onclick="() => RemoveEmail(email)">Remove</button>
            </div>
        }

        <button type="button" @onclick="AddEmail">Add Email</button>
    }
    <br />

    <label>Phones:</label>
    @if (_newAddress.Phones == null || !_newAddress.Phones.Any())
    {
        <p>No phones added. <button type="button" @onclick="@(() => AddPhone())">Add Phone</button></p>
    }
    else
    {
        @foreach (var phone in _newAddress.Phones)
        {
            <div>
                <InputText @bind-Value="phone.Value" placeholder="Phone Number" />
                <InputText @bind-Value="phone.Label" placeholder="Label (e.g., Mobile, Home)" />
                <button type="button" @onclick="@(() => RemovePhone(phone))">Remove</button>
            </div>
        }

        <button type="button" @onclick="@(() => AddPhone())" >Add Phone0</button>
        <button type="button" @onclick="AddPhone">Add Phone1</button>
        <button type="button" @onclick="() => AddPhone()">Add Phone2</button>

    }
    <br />

    <button type="submit">Save</button>
</EditForm>


@code {
    [Parameter]
    public string id { get; set; }

    private NewAddress _newAddress = new NewAddress();
    private bool isEdit;

    protected override async Task OnInitializedAsync()
    {
        if (!id.IsNullOrEmpty())
        {
            isEdit = true;
            string uri = $"/api/Address/{id}";
            _newAddress = await Http.GetFromJsonAsync<NewAddress>(uri);

        }
    }

    private async Task HandleValidSubmit()
    {
        if (isEdit)
        {
            await Http.PutAsJsonAsync($"api/Address/{id}", _newAddress);
        }
        else
        {
            await Http.PostAsJsonAsync("api/Address", _newAddress);
        }
        NavigationManager.NavigateTo("/addresses");
    }

    private void AddEmail()
    {
        _newAddress.Emails.Add(new Email("", ""));
    }

    private void RemoveEmail(Email email)
    {
        _newAddress.Emails.Remove(email);
    }

    private void AddPhone()
    {
        _newAddress.Phones.Add(new Phone("", ""));
    }

    private void RemovePhone(Phone phone)
    {
        _newAddress.Phones.Remove(phone);
    }
}

Answer 1

You are rendering the page statically. You need to turn on either InteractiveWebAssembly or InteractiveServer rendering.