How to Validate a Blazor EditForm that uses EditContext

130 views Asked by At

TLDR; EditForm with Model ="Record" will validate fields, but when I use EditForm with EditContext the validations will not fire. The app is a Blazor WebAssemblyApplication

Details:

I'm working on a BlazorWebAssemblyApp that has to do a PATCH API call. So when the fields are edited, I use the OnFieldChange(object sender, FieldArgments e) method to build the path in the JSONPatchDocument. That functionality is working great, but the DataAnnotations and Model Validations appear to be bypassed and I can't figure out how to get the DataAnnotations to fire the way they do when the EditContext is not part of the EditForm (I'll post both examples below).

FORM_1: DataAnnotations Fail but using EditContext

<EditForm EditContext="GrantEditGradeContext" OnValidSubmit="@OnSave"  id="grantGradeDetails" class="offcanvas-container">
                                                    <DataAnnotationsValidator />
                                                <div class="row">
                                                    <div class="col-5">
                                                    <label for="" class="form-label">Grade</label>
                                                    <RadzenNumeric Disabled=!EditGrantGradeSwitch TValue="Decimal?" Name="Grade"Placeholder="0.0" Max=@GrantGradeMax  ShowUpDown=false  @bind-Value="GrantRecord.Grade"></RadzenNumeric>
                                                     <ValidationMessage  For="@(()=>GrantRecord.Grade)"/>
                                                </div>
                                                <div class="col-5">
                                                    <label for="" class="form-label">Grade Overall</label>
                                                    <RadzenNumeric Disabled=true TValue="Decimal?" Placeholder="0.0" Max=@GrantGradeOverAllMax ShowUpDown=false Format="#" @bind-Value="GrantRecord.GradeOverall"></RadzenNumeric>

                                                </div>
                                                <div class="col-sm-3 col-md-3 py-2">   
                                                        <label for="Grade" class="form-label">Grade</label>
                                                    <RadzenDropDown id="Grade" Disabled=!EditGrantGradeSwitch class="form-select form-select-sm" TValue="int" @bind-Value="@GrantRecord.GrantGradeTypeMaster.GrantGradeTypeMasterId" AllowVirtualization="true"
                                                                   Data=@GrantGrades ValueProperty="GradeTypeMasterId" TextProperty="GradeType"   />
                                                </div>
                                        
                                                </div>
                                                            <button class="btn btn-primary btn-sm px-4" type="submit">Save</button>

                                            </EditForm>

FORM_2: Sample form Confirming DataAnnotations is Configured correct with Model.

<EditForm Model=GrantRecord OnValidSubmit="@OnSave"  id="grantGradeDetails" class="offcanvas-container">
                                                        <DataAnnotationsValidator />
                                                    <div class="row">
                                                        <div class="col-5">
                                                        <label for="" class="form-label">Grade</label>
                                                        <RadzenNumeric Disabled=!EditGrantGradeSwitch TValue="Decimal?" Name="Grade"Placeholder="0.0"  ShowUpDown=false  @bind-Value="GrantRecord.Grade"></RadzenNumeric>
                                                         <ValidationMessage  For="@(()=>GrantRecord.Grade)"/>
                                                    </div>
                                                    <div class="col-5">
                                                        <label for="" class="form-label">Grade Overall</label>
                                                        <RadzenNumeric Disabled=true TValue="Decimal?" Placeholder="0.0" Max=@GrantGradeOverAllMax ShowUpDown=false Format="#" @bind-Value="GrantRecord.GradeOverall"></RadzenNumeric>

                                                    </div>
                                                    <div class="col-sm-3 col-md-3 py-2">   
                                                            <label for="Grade" class="form-label">Grade</label>
                                                        <RadzenDropDown id="Grade" Disabled=!EditGrantGradeSwitch class="form-select form-select-sm" TValue="int" @bind-Value="@GrantRecord.GrantGradeTypeMaster.GrantGradeTypeMasterId" AllowVirtualization="true"
                                                                       Data=@GrantGrades ValueProperty="GradeTypeMasterId" TextProperty="GradeType"   />
                                                    </div>
                                            
                                                    </div>
                                                                <button class="btn btn-primary btn-sm px-4" type="submit">Save</button>

                                                </EditForm>

Class for the BlazorPage:

protected override async Task OnInitializedAsync()
        {
            loader = true;
            this.GrantEditOverviewContext = new EditContext(GrantRecord);
            this.GrantEditOverviewContext.OnFieldChanged += this.OnFieldChanged;

            this.GrantEditContext = new EditContext(GrantRecord);
            this.GrantEditContext.OnFieldChanged += OnFieldChanged;

            GrantEditGradeContext = new EditContext(GrantRecord);
            GrantEditGradeContext.EnableDataAnnotationsValidation();
            GrantEditGradeContext.OnFieldChanged += OnFieldChanged;
        }


private void OnFieldChanged(object sender, FieldChangedEventArgs e)
        { // building path here

} 
protected async override Task OnParametersSetAsync()
        {
            this.GrantEditOverviewContext = new EditContext(GrantEditOverviewContext); 
            this.GrantEditOverviewContext.OnFieldChanged += this.OnFieldChanged;

            this.GrantEditGradeContext = new EditContext(GrantEditGradeContext);
            
            this.GrantEditGradeContext.OnFieldChanged += this.OnFieldChanged;

            this.GrantEditContext = new EditContext(GrantEditContext); 
            this.GrantEditContext.OnFieldChanged += this.OnFieldChanged;
            StateHasChanged();
        } 
0

There are 0 answers