Blazor EditForm Array of Controls

Viewed 32

Suppose (this is a Proof of Concept) that you have a WASM Blazor project and an EditForm with multiple controls with an EditContext associated with an object graph, for example a Customer. The EditForm content is:

  • One InputText for a Name of the Customer.
  • One InputDate for a Birth property.
  • A CustomerLocationsControl component with EditContext property as CascadingParameter . This component renders an Array CustomerLocation property in a foreach loop. Each location has:
    • One InputText for the Street.
    • One InputNumber for the Portal.
  • A ValidationSummary.
  • A DataAnnotationsValidator (for testing purposes).
  • A ValidationMessageStore associtated with EditContext.

I handle OnFieldChanged and OnValidationRequested both in the root component and the child component to customize the validation process and clear and add errors to the ValidationMessageStore.

For each Input of the CustomerLocation and for each Input in the Customer, OnFieldChange allow to inspect the FieldIdentifier that allows inspecting the model and the name of the bind-value (property binding) in the razor file.

The problem is that the DataAnnotationsValidator doesn't highlights the error border in the array controls, but it highlights the red border in the controls that are not in the array. The ValidationSummary works fine as expected.

How are you handling showing validation colors in array child controls?

0 Answers
Related