首页 > 解决方案 > Angular mat-checkbox选中不等于表单组

问题描述

在创建 mat-checkbox 组件的动态列表(Angular Material 8.2.3)时,我注意到一些关于更改检测的奇怪行为。mat-checkbox 似乎没有根据其表单控件正确更改。

用例:用户应该能够根据一些外部数据选择多个选项。某些选项是必需的,在这种情况下,表单应将它们显示为选中和禁用。

复制:Stackblitz

从选择中选择最小值应根据复选框的值过滤复选框。值 60 始终是必需的。复选框显示第一次选择数字时的预期行为,但在更改选择几次后开始显示奇怪的行为。不再选中 required 和 disabled 复选框,有时会选中一个不同的复选框,而它不应该选中。表单控件状态(打印在复选框下方)似乎是正确的。

我发现的一种解决方法是在删除所有选项后手动触发更改检测。将现有的表单控件与 setValue 一起使用,而不是创建新的表单控件并没有什么不同。

这种行为的原因是什么,有没有比(手动)强制执行额外的更改检测周期更好的方法来解决它?

标签: angularangular-material

解决方案


您可以采取不同的方法。您可以根据最小值更改向用户显示的选项数量,而不是更改表单数组。

见这里: Stackblitz


推荐阅读