Search code examples
c#blazormudblazor

MudAutocomplete is null or empty Blazor


I have a problem, I am using the Mudblazor library and the MudAutocomplete component. The problem is that when I don't find anything in the field and click to confirm, I get an error that the object is null. How to protect yourself against this. I thought about using the disable option on the button but I don't know how to check if the object is null. My code:


<MudDialog>
    <DialogContent>

         <MudItem >
            <MudPaper Class="pa-4">

                <MudAutocomplete Required="true" RequiredError="Pole muis być uzupełnione!" @ref="RefEntryField" T="OptymalizationModels" Label="Indeks - Nazwa Towaru" @bind-Value="elemecik" SearchFunc="@Search2" ToStringFunc="@(e=> e==null?null : $"{e.indeks_compApps} - {e.Nazwa_ERPXL}")" ShowProgressIndicator="true" ProgressIndicatorColor="Color.Default" CoerceText="true" ResetValueOnEmptyText="false" />
            </MudPaper>
        </MudItem>

    </DialogContent>
    <DialogActions>
        <MudButton Variant="Variant.Filled"  Color="Color.Error" OnClick="Cancel">Anuluj</MudButton>
        <MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Save" Color="Color.Primary" OnClick="Replace" Disabled="false">Zamień</MudButton>
    </DialogActions>    
</MudDialog>
code {
    IEnumerable<OptymalizationModels> lista;
    OptymalizationModels elemecik;
    OptymalizationModels tmp_elemecik;
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    [Parameter] public int id { get; set; }
    [Parameter] public int srcdoc { get; set; }
    private MudAutocomplete<OptymalizationModels> RefEntryField;
    protected override async Task OnInitializedAsync()
    {
        tmp_elemecik = new OptymalizationModels();
        lista = await Task.Run(() => oS.GetListOkucInWarehouse());
        tmp_elemecik = await Task.Run(() => oS.GetONEOkucia(srcdoc, id));
    
    }
    private async Task<IEnumerable<OptymalizationModels>> Search2(string value)
    {

        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(1000);

        // if text is null or empty, don't return values (drop-down will not open)
        if (string.IsNullOrEmpty(value))
            return lista;
        return lista.Where(x => x.Nazwa_ERPXL.Contains(value, StringComparison.InvariantCultureIgnoreCase) || x.indeks_compApps.Contains(value, StringComparison.InvariantCultureIgnoreCase));

    }
    void Submit() => MudDialog.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog.Cancel();
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender) { await RefEntryField.FocusAsync(); }
    }
    private async Task Replace()
    {
     
        oS.UPDATEReplace(srcdoc, id, elemecik.Nazwa_ERPXL, elemecik.indeks_compApps, elemecik.jednostka_compApps, elemecik.ilosc_compApps, elemecik.gid_numer_compApps, elemecik.magazyn, elemecik.regal, elemecik.polka, elemecik.indeks_compApps,tmp_elemecik.indeks_compApps);
        Submit();
    }

}

Solution

  • You can simply set the Disabled attribute to elemcik == null

    So you would have

    <MudButton ... Disabled="@(elemcik == null)">Zamień</MudButton>
    

    I suggest using the form component with validation. So you can give the user the feedback that elemcik has to be selected.

    https://mudblazor.com/components/form#simple-form-validation

    Or you could check for the object not being null in your Replace method and by using the Error and ErrorText attribute of MudAutocomplete you can then display the error.

    private async Task Replace()
    {
        if(elemcik == null)
        {
            RefEntryField.Error = true;
            RefEntryField.ErrorText = "Please select one"
        }
        else
        {
            oS.UPDATEReplace(srcdoc, id, elemecik.Nazwa_ERPXL, elemecik.indeks_compApps, elemecik.jednostka_compApps, elemecik.ilosc_compApps, elemecik.gid_numer_compApps, elemecik.magazyn, elemecik.regal, elemecik.polka, elemecik.indeks_compApps,tmp_elemecik.indeks_compApps);
            Submit();
        }
    }