在 ReactiveForm 中过滤复选框列表会导致渲染错误
Filtering checkbox-list in a ReactiveForm leads to rendering error
我已经设置了一个响应式表单。它包括常规输入字段以及作为列表的多个复选框。我还包括一个输入字段来过滤复选框列表。虽然普通字符不会造成任何问题，但点 (.) 字符似乎会影响复选框的呈现。
如果您搜索 "Zwei"，一切似乎都很好。 （选中的）复选框保持其 "checked" 状态，即使您之后删除了搜索值。
如果您现在在搜索字段中输入 "i.null"，似乎一切正常。现在删除前两个字符并重新输入；现在出现了（渲染？）问题。第二个复选框 ("ZWEI.NULL") 呈现为 "checked"，但我没有在控制器中单击也没有标记为 "selected"。如果您查看 formGroup-debug-console 消息（通过按顶部按钮），"selected"-属性 未定义为 "true".
代码示例：https://stackblitz.com/edit/angular-xuohtg
我希望复选框保持选中状态。您知道这种效果是如何产生的吗？
核心问题是您在组件中使用了 2 个不同的数组：一个是 FormArray 实例中的 controls 数组（我们称它为 ModelArray) 和过滤器处理后返回的那个（我们称之为 ViewArray）。
它们都有相同的 FormGroup 个实例，但顺序不同。您使用 ViewArray 生成视图，并通过 FormArrayName 和 FormGroupName 指令将其索引映射到 ModelArray[=41= 中的元素].
对于 I 的索引 0 < I < len(ViewArray)，您将最终显示 FormGroup 实例 A <= ViewArray[I] 并将视图输入绑定到实例 B <= ModelArray[I]，有可能A 是 B === false
您可以通过使用 FormGroupDirective 而不是 FormGroupName 指令将 FormGroup 实例绑定到 FormArrayName 来解决这个问题，如下所示：
<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
我已经设置了一个响应式表单。它包括常规输入字段以及作为列表的多个复选框。我还包括一个输入字段来过滤复选框列表。虽然普通字符不会造成任何问题，但点 (.) 字符似乎会影响复选框的呈现。
如果您搜索 "Zwei"，一切似乎都很好。 （选中的）复选框保持其 "checked" 状态，即使您之后删除了搜索值。
如果您现在在搜索字段中输入 "i.null"，似乎一切正常。现在删除前两个字符并重新输入；现在出现了（渲染？）问题。第二个复选框 ("ZWEI.NULL") 呈现为 "checked"，但我没有在控制器中单击也没有标记为 "selected"。如果您查看 formGroup-debug-console 消息（通过按顶部按钮），"selected"-属性 未定义为 "true".
代码示例：https://stackblitz.com/edit/angular-xuohtg
我希望复选框保持选中状态。您知道这种效果是如何产生的吗？
核心问题是您在组件中使用了 2 个不同的数组：一个是 FormArray 实例中的 controls 数组（我们称它为 ModelArray) 和过滤器处理后返回的那个（我们称之为 ViewArray）。
它们都有相同的 FormGroup 个实例，但顺序不同。您使用 ViewArray 生成视图，并通过 FormArrayName 和 FormGroupName 指令将其索引映射到 ModelArray[=41= 中的元素].
对于 I 的索引 0 < I < len(ViewArray)，您将最终显示 FormGroup 实例 A <= ViewArray[I] 并将视图输入绑定到实例 B <= ModelArray[I]，有可能A 是 B === false
您可以通过使用 FormGroupDirective 而不是 FormGroupName 指令将 FormGroup 实例绑定到 FormArrayName 来解决这个问题，如下所示：
<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