时间戳

首页 > 解决方案 > 在 ReactiveForm 中过滤复选框列表会导致呈现错误

angular - 在 ReactiveForm 中过滤复选框列表会导致呈现错误

问题描述

我已经建立了一个反应形式。它包括常规输入字段以及多个复选框作为列表。我还包括一个输入字段来过滤复选框列表。虽然普通字符不会引起任何问题，但点 (.) 字符似乎会影响复选框的呈现。

如果您搜索“Zwei”，一切似乎都很好。（选中的）复选框保持其“选中”状态，即使您之后删除了搜索值。

如果您现在在搜索字段中输入“i.null”，一切似乎都正常。现在删除前两个字符并重新输入它们；现在出现（渲染？）问题。第二个复选框（“ZWEI.NULL”）呈现为“选中”，但我没有被点击，也没有在控制器中标记为“选中”。如果您查看 formGroup-debug-console 消息（通过按下顶部按钮），“selected”-property 未定义为“true”。

代码示例：https ://stackblitz.com/edit/angular-xuohtg

我希望复选框保持选中状态。你知道这种效果是如何产生的吗？

标签： angulartypescriptangular-reactive-formsangular-formsangular-pipe

解决方案

核心问题是您在组件中使用了 2 个不同的数组：一个是实例中的控件数组FormArray（我们称之为ModelArray），另一个是在处理过滤器后返回的（我们称之为ViewArray）。

它们都有相同的FormGroup实例，但顺序不同。您使用ViewArray生成视图，并通过FormArrayName和FormGroupName指令将其索引映射到ModelArray中的元素。

对于0 < I < len(ViewArray)的索引I，您最终将显示实例A <= ViewArray[I]的值并将视图输入绑定到实例B <= ModelArray[I]，有可能A是B === 假FormGroup

您可以通过使用以下指令而不是指令将FormGroup实例绑定到 来克服此问题：FormArrayNameFormGroupDirectiveFormGroupName

<div class="form-group"
         formArrayName="permissions">
        <label class="checkboxLabel"
               *ngFor="let permissionGroup of permissionsControl.controls | LockFilter: filter.value; index as i"
               [formGroup]="permissionGroup">
            <input type="checkbox"
                   formControlName="selected">
            ({{ i }}){{permissionGroup.value.label}} ({{permissionGroup.value.id}})
        </label>
    </div>

在这个闪电战中可以找到一个工作示例

推荐阅读