动态删除字段时字段验证呈现的 Blazor 问题

Question

我们有一个请求表单，可以根据输入添加或删除利益相关者字段。

如果用户单击“添加利益相关者”按钮，它将向利益相关者集合中添加一个新的利益相关者对象，然后在表单上填充一行新的利益相关者字段。 StakeHolderFirstName、StakeholderLastName 和 StakeholderEmail。

我们还提供了从表单中删除之前添加的利益相关者的功能。表单上的每一行利益相关者字段都包含一个按钮，用于从利益相关者集合中删除该利益相关者。

使用 .Net Core Framework 中包含的标准 DataAnnotations 命名空间，所有利益相关者字段都标记为必填。

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; }

在大多数情况下，所有这些都按预期工作。尽管我很困惑，但我们遇到了一个边缘案例。

第 1 步：提交包含有效数据的三个利益相关者的表格

结果：表单已通过验证，未显示任何验证消息，涉众字段以绿色突出显示

第 2 步：清除利益相关者 2 的数据

结果：表格反映利益相关者 2 缺少数据并且字段是必需的，字段现在以红色突出显示

第 3 步：删除利益相关者 1 的行。

结果：删除了原来的 Stakeholder1。利益相关者 2 成为利益相关者 1。利益相关者 3 成为利益相关者 2。

如预期的那样，过去出现在 StakeHolder2 上的验证消息现在出现在 Stakeholder1 上。

但是，css class 突出显示字段 RED（表单控件修改无效）保留在 Stakeholder2 上。

起初我认为这可能与删除利益相关者时元素ID未正确更新有关，但我验证更新后ID确实正确。这很奇怪，因为它正在为验证消息选择正确的字段。它只是没有更新 css class 以将适当的字段突出显示为有效/无效。

这是一个非常基本的表单，我没有做任何高级操作或使用任何第三方控件。有任何想法吗？这是框架的问题吗？

Answer 1

试试这个：在迭代利益相关者列表的代码中，在每个利益相关者处，无论它是什么，假设一个组件添加具有利益相关者本身值的 @key 指令属性。

下面是一个代码示例来描述上面的单词：

此代码应位于请求表单中，您可以在其中创建列表利益相关者组件...

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

        
    }

   @code
   {
       private List<Stakeholder> stakeHolders;
     
   }

了解 @key 指令属性 here

动态删除字段时字段验证呈现的 Blazor 问题

Blazor issue with field validation rendering when dynamically removing fields

blazor

.net-core-3.1