为什么表单标签会干扰我的 ngModel 和属性绑定？ ngModel in ngFor 内的 Form 标签

Question

你好！

我有几个复选框与 ngFor 中的 ngModel 绑定，但如果我的标记包含在 <form> 标记中，UI 会意外工作。例如 [checked]="team.original" 和 [disabled]="!group.internal" 无法正常工作。

https://plnkr.co/edit/yxngdinXlHD1G9ITeGLT?p=preview

谢谢！

编辑：

例如，您是否看到 [checked]="team.original" 和 [disabled]="!group.internal" 它们根据其值不起作用。同样对于 'Original' 列，我打印实际值 - 'false' 但复选框已选中。

Answer 1

在表单中，名称需要是唯一的。所以现在在您的表单中，它不会被评估为两个不同的团队，因为名称属性是相同的。这里一般在迭代中使用索引来区分名字，所以：

*ngFor="let team of group['teams']; let i=index"

和name属性

name="read{{i}}"

您还有一个问题，因为 teams 属于两个不同的组，并且每个组在各自的数组中都有索引 0。因此，如果使用上述方法，您最终会得到相同的 name 属性。

read{{i}} 最终会成为 read0 ，这仍然不能解决您的问题，因为它将被评估为一个相同的表单名称。因此，您需要使用两个索引，用于顶级迭代和嵌套迭代：

<div *ngFor="let group of groups; let j=index">

和

<tr *ngFor="let team of group['teams']; let i=index">

并标记你的 name 属性：

name="read{{j}}{{i}}"

现在您表单中的所有项目都有唯一的名称，因此您的表单值的结果将如下所示：

{
  "read00": true,
  "download00": true,
  "original00": false,
  "read10": true,
  "download10": true,
  "original10": true,
  "contribute10": true,
  "manage10": false
}

这就是表单的工作原理。所有名称必须是唯一的。

这是你的分叉 Plunker

为什么表单标签会干扰我的 ngModel 和属性绑定？ ngModel in ngFor 内的 Form 标签

Why form tag messes with my ngModel and attributes binding? ngModel in ngFor inside Form tag

forms

user-interface

ngfor

ngmodel

angular