Blazor issue with field validation rendering when dynamically removing fields

Question

We have a request form that can add or remove Stakeholder fields based on input.

If the user clicks an "Add Stakeholder" button it will add a new Stakeholder object to the collection of Stakeholders, then populate a new row of Stakeholder fields on the form. StakeHolderFirstName, StakeholderLastName, and StakeholderEmail.

We also provide the ability to remove a previously added stakeholder from the form. Each row of stakeholder fields on the form include a button that removes that stakeholder from the collection of stakeholders.

All Stakeholder fields are marked as Required, using the standard DataAnnotations namespace included in the .Net Core Framework.

Stakeholder.cs

    using System.ComponentModel.DataAnnotations;
    
    ...

    [Required(ErrorMessage = "First Name is required.")]
    public string FirstName { get; set; }
    
    [Required(ErrorMessage = "Last Name is required.")]
    public string LastName { get; set; }
    
    [Required(ErrorMessage = "Email Address is required.")]
    public string Email { get; set; }

All of this works as expected in most cases. We have encountered an edge case though where I am stumped.

Step 1: Submit form with three stakeholders with valid data

Result: Form is validated, no validation messages appear and stakeholder fields are highlighted green

Step 2: Clear the data for Stakeholder 2

Result: Form reflects that Stakeholder 2 is missing data and the fields are required, fields are now highlighted red

Step 3: Delete the row for Stakeholder 1.

Result: The original Stakeholder1 is removed. Stakeholder 2 becomes Stakeholder 1. Stakeholder 3 becomes Stakeholder 2.

The validation message that use to appear on StakeHolder2 is now on Stakeholder1, as expected.

However, the css class that highlights the field RED (form-control modified invalid) remained on Stakeholder2.

At first I thought that this might have something to do with the element IDs not getting updated properly when removing a stakeholder, but I verified that the IDs are indeed correct after the updates. It is weird because it is picking up the correct field for the validation message. It just isn't updating the css class for highlighting the proper fields as valid / invalid.

This is a pretty basic form, I'm not doing anything advanced or using any third party controls. Any ideas? Is this an issue with the framework?

enet enet · Accepted Answer · 2020-10-28T16:34:38

Try this: In the code that iterate a list of stakeholders, at each stakeholder, what ever it is, say a component add the @key directive attribute with a value of the stakeholder itself.

Here's a code sample to describe the words above:

This code should be in the request form, where you create a list of StakeHolder components...

    @foreach( var holder in stakeHolders)
    {
        <StakeHolder @key="holder" Data="holder"></StakeHolder>

        
    }

   @code
   {
       private List<Stakeholder> stakeHolders;
     
   }

Read about the @key directive attribute here

Blazor issue with field validation rendering when dynamically removing fields

1 Answers