1. Home
  2. Forum
  3. Blazor
  4. Error when using EditForm inside modal.

Error when using EditForm inside modal.

Hello,
I get the following error: Error: System.NullReferenceException: Object reference not set to an instance of an object. when trying to close a modal that has an EditForm in it. My code is the following:

@page "/"
@using Syncfusion.EJ2.Blazor.Inputs
@using Syncfusion.EJ2.Blazor.Popups
@using Microsoft.AspNetCore.Components.Forms;

@if (this.IsVisible)
{
    <EjsDialog id="dialog" header=@("Analysis") width="800px" isModal=@true allowDragging=@true ShowCloseIcon=true>
        <DialogEvents [email protected]></DialogEvents>
        <EditForm Model=@(new object { }) OnValidSubmit=@(() => this.Save())>
            <div class="form-group row mt-2">
                <label for="Attachments" class="col-2 col-form-label">Attachments:</label>
                <div class="col-4">
                    <EjsUploader ID="UploadFiles"
                                 DropArea=".control-fluid"
                                 [email protected]
                                 maxFileSize="2000000">
                        <UploaderEvents OnUploadStart=this.OnFileUpload></UploaderEvents>
                    </EjsUploader>
                </div>
            </div>
            <button @onclick=@(() => this.IsVisible = false)>click</button>
        </EditForm>
    </EjsDialog>
}


<button @onclick=@(() => this.IsVisible = true)>click</button>
@code{
    public UploaderAsyncSettings AsyncSettings { get; set; } = new UploaderAsyncSettings
    {
        SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save",
        RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"
    };

    public bool IsVisible { get; set; } = false;

    public void OnIconClose(BeforeCloseEventArgs args)
    {
        args.Cancel = true;
        this.IsVisible = false;
    }

    public void OnFileUpload(UploadingEventArgs arg)
    {
        arg.Cancel = true;

    }

    public void Save()
    {

    }
}


The problem seems to come from the file upload component's UploaderEvents. Moreover, if I take the file upload component outside of the edit form no error is thrown. Hovewer, I would like to have it inside.

4 Replies
PM Pandiyaraj Muniyandi Syncfusion Team August 5, 2019 05:18 PM UTC

Hi Krasimir, 
 
Greetings from Syncfusion support. 
 
Further analysis from the provided code, we find that you bound the empty new object to the model for the EditForm. In this case, every changes in the model goes to the component re-rendering. This is the cause of the reported problem. But, this is already known issue in Blazor platform and this issue will be fixed once Preview 8 has been rolled out. We will intimate you once this issue has been fixed.   
 
Please find the GitHub link from below. 
 
 
So, we suggest you to assign the empty model with new class to the EditForm model as mentioned in the below code example.  
 
@using Syncfusion.EJ2.Blazor.Inputs 
@using Syncfusion.EJ2.Blazor.Popups 
@using Microsoft.AspNetCore.Components.Forms; 
 
@if (this.IsVisible) 
{ 
    <EjsDialog id="dialog" header=@("Analysis") width="800px" isModal=@true allowDragging=@true ShowCloseIcon=true> 
        <DialogEvents OnClose=@this.OnIconClose></DialogEvents> 
        <EditForm Model="@model" OnValidSubmit=@(() => this.Save())> 
            <div class="form-group row mt-2"> 
                <label for="Attachments" class="col-2 col-form-label">Attachments:</label> 
                <div class="col-4"> 
                    <EjsUploader ID="UploadFiles" 
                                 DropArea=".control-fluid" 
                                 AsyncSettings=@this.AsyncSettings 
                                 maxFileSize="2000000"> 
                        <UploaderEvents OnUploadStart=this.OnFileUpload></UploaderEvents> 
                    </EjsUploader> 
                </div> 
            </div> 
            <button @onclick=@(() => this.IsVisible = false)>click</button> 
        </EditForm> 
    </EjsDialog> 
} 
 
 
<button @onclick=@(() => this.IsVisible = true)>click</button> 
 
@code{ 
 
public EditModel model = new EditModel(); 
 
public int? numericVale { get; set; } = 10; 
public UploaderAsyncSettings AsyncSettings { get; set; } = new UploaderAsyncSettings 
{ 
}; 
 
public bool IsVisible { get; set; } = false; 
 
public void OnIconClose(BeforeCloseEventArgs args) 
{ 
    args.Cancel = true; 
    this.IsVisible = false; 
} 
public void ValueChange(ChangeEventArgs args) 
{ 
    Console.WriteLine(args.Value); 
} 
 
public class EditModel 
{ 
    
} 
 
public void OnFileUpload(UploadingEventArgs arg) 
{ 
    arg.Cancel = true; 
 
} 
 
 
public void Save() 
{ 
 
} 
} 
 
 
Note: args.cancel support in the Uploading event not provided for the Uploader component in Blazor platform.  
 
Regards, 
Pandiyaraj M 


KI Krasimir Ivanov August 5, 2019 06:47 PM UTC

Ok but even when I give it a valid model it still throws the same exception. My code is:

@page "/"
@using Syncfusion.EJ2.Blazor.Inputs
@using Syncfusion.EJ2.Blazor.Popups
@using Microsoft.AspNetCore.Components.Forms;
@using System.ComponentModel.DataAnnotations;

@if (this.IsVisible)
{
    <EjsDialog id="dialog" header=@("Sample modal") width="800px" isModal=@true allowDragging=@true ShowCloseIcon=true>
        <DialogEvents [email protected]></DialogEvents>
        <EditForm [email protected] OnValidSubmit=@(() => this.Save())>
            <DataAnnotationsValidator />
            <div class="form-group row">
                <label class="col-2 col-form-label">Number</label>
                <div class="col-4">
                    <input class="form-control" @bind="@this.ValidationModel.Number" />
                    <ValidationMessage For="@(() => this.ValidationModel.Number)" />
                </div>
            </div>

            <div class="form-group row mt-2">
                <label for="Attachments" class="col-2 col-form-label">Attachments:</label>
                <div class="col-4">
                    <EjsUploader ID="UploadFiles"
                                 DropArea=".control-fluid"
                                 [email protected]
                                 maxFileSize="2000000">
                        <UploaderEvents OnUploadStart=this.OnFileUpload></UploaderEvents>
                    </EjsUploader>
                </div>
            </div>
            <button type="submit">click</button>
        </EditForm>
    </EjsDialog>
}


<button @onclick=@(() => this.IsVisible = true)>click</button>
@code{
    public UploaderAsyncSettings AsyncSettings { get; set; } = new UploaderAsyncSettings
    {
        SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save",
        RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"
    };

    public MyValidationModel ValidationModel { get; set; } = new MyValidationModel();

    public bool IsVisible { get; set; } = false;

    public void OnIconClose(BeforeCloseEventArgs args)
    {
        args.Cancel = true;
        this.IsVisible = false;
    }

    public void OnFileUpload(UploadingEventArgs arg)
    {
        //arg.Cancel = true;

    }

    public void Save()
    {
        this.IsVisible = false;
    }

    public class MyValidationModel
    {
        [Required(ErrorMessage = "Number is required")]
        public string Number { get; set; }
    }
}


BC Berly Christopher Syncfusion Team August 6, 2019 11:01 AM UTC

Hi Krasimir, 

  
As we said already, if the component destroyed and re-rendered based on condition, we will face this object reference exception. We will wait for preview 8 update from Microsoft to resolve this issue. 

  
Until then, could you please use this workaround solution that achieved your requirement using Show/Hide method of Dialog? We prepared the sample based on your requirement. 

  
  
  
Regards, 
Berly B.C 


KI Krasimir Ivanov August 6, 2019 08:03 PM UTC

Yes, I seem to have made a mistake. Thank you for your support!

Loader.
Up arrow icon