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

Question

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

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

如果您现在在搜索字段中输入“ i.null”，那么一切似乎都还可以。现在删除前两个字符并重新输入；现在出现（渲染？）问题。第二个复选框（“ ZWEI.NULL”）被呈现为“已选中”，但是在控制器中我既未单击也未标记为“已选中”。如果您查看formGroup-debug-console消息（按顶部按钮），则“ selected”属性未定义为“ true”。

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

我希望这些复选框保持选中状态。您是否知道这种效果如何发挥作用？

Answer 1

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

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

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

您可以通过使用FormGroup而不是FormArrayName指令将FormGroupDirective实例绑定到FormGroupName来克服此问题，如下所示：

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

可以找到一个有效的示例in this blitz