I’m new to Blazor and I’m experimenting with a login form in a new project. I have set up the following code for the form, but regardless of the input, the username and password fields are always null. As a result, the form isn’t functioning as expected.

Here’s the relevant code for the form and the associated handler methods:

@page "/signup-login"
@using Services
@using System.ComponentModel.DataAnnotations
@inject IUserService UserService

<div class="signup-login-bg-container">
    <div class="signup-login-form-box">
        <h2>Test</h2>

        <!-- Sign Up Form -->
        <div class="signup-login-form-section">
            <h3>Sign Up</h3>
            <EditForm Model="signUpModel" OnValidSubmit="HandleSignUp" FormName="SignUpForm">
                <DataAnnotationsValidator />
                <ValidationSummary />

                <label for="signup-email">Email:</label>
                <InputText id="signup-email" @bind-Value="signUpModel.Email" />
                <ValidationMessage For="@(() => signUpModel.Email)" />

                <label for="signup-password">Password:</label>
                <InputText id="signup-password" type="password" @bind-Value="signUpModel.Password" />
                <ValidationMessage For="@(() => signUpModel.Password)" />

                <button type="submit" class="rounded-btn">Sign Up</button>

                @if (!string.IsNullOrEmpty(signUpErrorMessage))
                {
                    <div class="error-message">@signUpErrorMessage</div>
                }
                @if (!string.IsNullOrEmpty(signUpSuccessMessage))
                {
                    <div class="success-message">@signUpSuccessMessage</div>
                }
            </EditForm>
        </div>

        <!-- Sign In Form -->
        <div class="signup-login-form-section">
            <h3>Sign In</h3>
            <EditForm Model="signInModel" OnValidSubmit="HandleSignIn" FormName="SignInForm">
                <DataAnnotationsValidator />
                <ValidationSummary />

                <label for="login-email">Email:</label>
                <InputText id="login-email" @bind-Value="signInModel.Email" />
                <ValidationMessage For="@(() => signInModel.Email)" />

                <label for="login-password">Password:</label>
                <InputText id="login-password" type="password" @bind-Value="signInModel.Password" />
                <ValidationMessage For="@(() => signInModel.Password)" />

                <button type="submit" class="rounded-btn">Sign In</button>
                <div class="forgot-password">
                    <a href="#">Forgot password?</a>
                </div>

                @if (!string.IsNullOrEmpty(signInErrorMessage))
                {
                    <div class="error-message">@signInErrorMessage</div>
                }
                @if (!string.IsNullOrEmpty(signInSuccessMessage))
                {
                    <div class="success-message">@signInSuccessMessage</div>
                }
            </EditForm>
        </div>

        <!-- Social Login Buttons -->
        <div class="social-login-buttons">
            <button class="social-btn google-btn" id="google-signin">Sign in with Google</button>
            <button class="social-btn facebook-btn" id="facebook-signin">Sign in with Facebook</button>
        </div>

        <div class="signup-login-footer">
            By signing up, you agree to our <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a>.
        </div>
    </div>
</div>

@code {
    private SignUpModel signUpModel = new SignUpModel();
    private SignUpModel signInModel = new SignUpModel();
    private string signUpErrorMessage = string.Empty;
    private string signUpSuccessMessage = string.Empty;
    private string signInErrorMessage = string.Empty;
    private string signInSuccessMessage = string.Empty;

    private async Task HandleSignUp()
    {
        // Debugging output
        Console.WriteLine($"SignUpModel.Email: {signUpModel.Email}");
        Console.WriteLine($"SignUpModel.Password: {signUpModel.Password}");

        // Ensure form validation before calling the service
        if (!TryValidateModel(signUpModel))
        {
            signUpErrorMessage = "Please correct the errors in the form.";
            signUpSuccessMessage = null;
            return;
        }

        try
        {
            bool result = await UserService.RegisterUserAsync(signUpModel);
            if (result)
            {
                signUpSuccessMessage = "Registration successful. Please log in.";
                signUpErrorMessage = null;
                signUpModel = new SignUpModel(); // Reset form
            }
            else
            {
                signUpErrorMessage = "Registration failed. Please try again.";
                signUpSuccessMessage = null;
            }
        }
        catch (Exception ex)
        {
            signUpErrorMessage = $"Error during sign-up: {ex.Message}";
            signUpSuccessMessage = null;
        }
    }

    private async Task HandleSignIn()
    {
        // Debugging output
        Console.WriteLine($"SignUpModel.Email: {signInModel.Email}");
        Console.WriteLine($"SignUpModel.Password: {signInModel.Password}");

        // Ensure form validation before calling the service
        if (!TryValidateModel(signInModel))
        {
            signInErrorMessage = "Please correct the errors in the form.";
            signInSuccessMessage = null;
            return;
        }

        try
        {
            var user = await UserService.AuthenticateUserAsync(signInModel);
            if (user != null)
            {
                signInSuccessMessage = "Login successful. Redirecting...";
                signInErrorMessage = null;
                // Implement redirection or authentication state update here
                // For example: NavigationManager.NavigateTo("/dashboard");
            }
            else
            {
                signInErrorMessage = "Invalid login attempt. Please check your credentials.";
                signInSuccessMessage = null;
            }
        }
        catch (Exception ex)
        {
            signInErrorMessage = $"Error during sign-in: {ex.Message}";
            signInSuccessMessage = null;
        }
    }

    public class SignUpModel
    {
        [Required(ErrorMessage = "The Email field is required.")]
        [EmailAddress(ErrorMessage = "Invalid email address.")]
        [SupplyParameterFromForm(FormName = "SignUpForm")]
        public string? Email { get; set; }

        [Required(ErrorMessage = "The Password field is required.")]
        [StringLength(100, MinimumLength = 6, ErrorMessage = "The password must be at least 6 characters long.")]
        [SupplyParameterFromForm(FormName = "SignUpForm")]
        public string? Password { get; set; }
    }

    public class SignInModel
    {
        [Required(ErrorMessage = "The Email field is required.")]
        [EmailAddress(ErrorMessage = "Invalid email address.")]
        [SupplyParameterFromForm(FormName = "SignInForm")]
        public string? Email { get; set; }

        [Required(ErrorMessage = "The Password field is required.")]
        [StringLength(100, MinimumLength = 6, ErrorMessage = "The password must be at least 6 characters long.")]
        [SupplyParameterFromForm(FormName = "SignInForm")]
        public string? Password { get; set; }
    }

    // Helper method to manually validate the model
    private bool TryValidateModel(object model)
    {
        var validationContext = new ValidationContext(model);
        var validationResults = new List<ValidationResult>();
        return Validator.TryValidateObject(model, validationContext, validationResults, true);
    }
}

Despite entering values into the form fields, the username and password fields in the signUpModel and signInModel remain null. I’ve ensured that no JavaScript is interfering with the form. What could be causing this issue?