On my Blazor 8 Interactive auto app, where the interactive mode is set to per page/component.

I have the following form inside a page:

  @switch (_pollRequest.PollType)
 {
     case Contracts.PollType.DateType:
         {

         }
         break;
     case Contracts.PollType.BoolType:
         {
             <div class="mt-6 flex items-center justify-center gap-3 bg-white p-5 w-9/12 rounded border">
                 <EditForm Enhance EditContext="editContext" OnValidSubmit="GetState" FormName="SimpleYesNo">
                     <DataAnnotationsValidator></DataAnnotationsValidator>
                     <ValidationSummary  />
                     <InputRadioGroup @bind-Value="model!.NotificationMethod" >
                         <div class="flex items-center">
                             <InputRadio id="true" Value="@("হ্যা")" class="h-4 w-4 border-gray-300 text-primary focus:ring-primary" />
                             <label for="true" class="ml-3 block text-sm font-medium leading-6 text-black">হ্যা</label>
                         </div>
                         <div class="flex items-center">
                             <InputRadio id="false" Value="@("হ্যা")" class="h-4 w-4 border-gray-300 text-primary focus:ring-primary" />
                             <label for="false" class="ml-3 block text-sm font-medium leading-6 text-black">না</label>
                         </div>
                     </InputRadioGroup>
                     <ValidationMessage For="@(()=>model!.NotificationMethod)"></ValidationMessage>
                     <p>Selected Notification Method: @model.NotificationMethod</p>
                     <input type="submit" value="save"/>
                 </EditForm>
             </div>
         }
         break;
     case Contracts.PollType.StringType:
         {
             <EditForm Enhance EditContext="editContext" OnValidSubmit="GetState" FormName="SimpleYesNo">
                 <DataAnnotationsValidator></DataAnnotationsValidator>
                 <fieldset class="w-9/12">
                     <div class="mt-6 space-y-6 w-full bg-white p-5 rounded border">
                         <InputRadioGroup @bind-Value="model!.NotificationMethod">
                             @foreach (var options in _pollRequest.Options)
                             {
                                 <div class="flex items-center">
                                     <InputRadio id="@options.OptionName" Value="@options.OptionName" class="h-4 w-4 border-gray-300 text-primary focus:ring-primary" />
                                     <label for="@options.OptionName" class="ml-3 block text-sm font-medium leading-6 text-black text-start">@options.OptionName</label>
                                 </div>
                             }
                         </InputRadioGroup>
                         <ValidationMessage class="text-primary text-center" For="@(()=>model!.NotificationMethod)"></ValidationMessage>
                     </div>
                     <button type="submit">Update</button>
                     <p>Selected Notification Method: @model.NotificationMethod</p>
                 </fieldset>
             </EditForm>
         }
         break;
}

My model class

public class NotificationModel
{
    [Required(ErrorMessage = "Ekti option choose korun")]
    public string? NotificationMethod { get; set; }
}
private NotificationModel? model = new NotificationModel();
private EditContext? editContext;

and initialization:

 protected override async Task OnInitializedAsync()
 {
     model ??= new();
     editContext = new EditContext(model);
 }

I have omitted the other code for brevity. I tried it with input as submit and button type as submit. In both cases when the submit type element is clicked, the page is refreshed first and then form validation is checked. I am totally stumped. I have to admit I am not webdev pro or have a lot of experience in this field.