We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to use Validation for Custom component within EditForm

I have used Validation in EditForm (For sfCombobox/sfTextbox etc).It works fine as per my requirement (when Click on submit button).When I use Custom Component within EditForm,the validation message is still showing even when we enter some value.Please advise how to use validation message for custom component



Code: -


<div class="col-sm-12 col-md-12 col-lg-12">
                                <MaterialSearchVertical @ref="materialSearchVertical" EditEnabled="@EditEnabled" MaterialTypeID="materialRequestDetailDisplaySetup.MaterialTypeID"
                                                PurchaseTypeID="materialRequestSetup.PurchaseTypeID"
                                                MaterialSKUID="materialRequestDetailDisplaySetup.MaterialSKUID"
                                                MaterialTypeLoad=" AND A.ReferenceDetailsCode in ('SUMAT','MNT','HLTS') "
                                                EventCallBackMaterialSearch="MaterialSearchEventCallBack"></MaterialSearchVertical>
                                <ValidationMessage For="@(() => materialRequestDetailDisplaySetup.MaterialSKUID)" />
                            </div>



Component Code: -

@inherits MaterialSearchVerticalBase


<div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">

    <SfComboBox Enabled="@EditEnabled" CssClass="required" @ref="cmbMaterialType" DataSource="@materialTypeSetups" @bind-Value="@MaterialTypeID" Placeholder="Material Type"

                    FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" AllowFiltering="true" FloatLabelType="@FloatLabelType.Always" ShowClearButton="true">

        <ComboBoxFieldSettings Value="ReferenceDetailsID" Text="ReferenceDetailsName"></ComboBoxFieldSettings>

        <ComboBoxEvents TValue="int?" TItem="SReferenceDetailsSetup" ValueChange="@MaterialTypeChange"></ComboBoxEvents>

    </SfComboBox>


</div>


<div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">

    <SfComboBox Enabled="@EditEnabled" CssClass="e-multi-column required" @ref="cmbMaterialSKU" Query="@query" TValue="int?" TItem="MaterialSKUSearchSetup" @bind-Value="@internalMaterialSKUID" PopupWidth="1150px" Placeholder="Material SKU"

                    FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" AllowFiltering="true" FloatLabelType="@FloatLabelType.Always" EnableVirtualization="true" >

        <SfDataManager @ref="sfData" Json="@materialSKUSearchSetups" Adaptor="Adaptors.JsonAdaptor"></SfDataManager>

        <ComboBoxFieldSettings Text="MaterialSKUName" Value="MaterialSKUID"></ComboBoxFieldSettings>

        <ComboBoxEvents TValue="int?" TItem="MaterialSKUSearchSetup" ValueChange="@MaterialSKUChange" Filtering="OnFiltering"></ComboBoxEvents>

        <ComboBoxTemplates TItem="MaterialSKUSearchSetup">

            <HeaderTemplate>

                <table class="table-header">

                    <thead>

                        <tr>

                            <th width="350px" class="e-text-center">MaterialName</th>

                            <th width="100px">Source</th>

                            <th width="100px">Uom</th>

                            <th width="150px">MaterialCode</th>

                            <th width="200px">Main Group</th>

                            <th width="100px">CM No</th>

                            <th width="150px">Vendor Code</th>

                        </tr>

                    </thead>

                </table>

            </HeaderTemplate>

            <ItemTemplate Context="context2">

                <table class="table-body">

                    <tbody>

                        <tr>

                            <td width="350px" style="height:none" class="e-text-center">@((context2 as MaterialSKUSearchSetup).MaterialSKUName)</td>

                            <td width="100px">@((context2 as MaterialSKUSearchSetup).SourceName)</td>

                            <td width="100px">@((context2 as MaterialSKUSearchSetup).UomName)</td>

                            <td width="150px">@((context2 as MaterialSKUSearchSetup).MaterialSKUCode)</td>

                            <td width="200px">@((context2 as MaterialSKUSearchSetup).MainGroupName)</td>

                            <td width="100px">@((context2 as MaterialSKUSearchSetup).CMNo)</td>

                            <td width="150px">@((context2 as MaterialSKUSearchSetup).VendorCode)</td>

                        </tr>

                    </tbody>

                 </table>

            </ItemTemplate>

        </ComboBoxTemplates>

        <ValidationMessage For="@(() =>@internalMaterialSKUID)" />

    </SfComboBox>

</div>



1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team December 6, 2022 07:12 AM UTC

You can find more information about "How to use Validation for Custom Component within EditForm" in the Syncfusion forum linked below. 


https://www.syncfusion.com/forums/169085/validation-of-child-component?reply=SoHuMh



Loader.
Live Chat Icon For mobile
Up arrow icon