为啥表单标签会与我的 ngModel 和属性绑定混淆？ ngModel 在 ngFor 里面 Form 标签

Posted 2023-02-22

【中文标题】为啥表单标签会与我的 ngModel 和属性绑定混淆？ ngModel 在 ngFor 里面 Form 标签

【英文标题】：Why form tag messes with my ngModel and attributes binding? ngModel in ngFor inside Form tag为什么表单标签会与我的 ngModel 和属性绑定混淆？ ngModel 在 ngFor 里面 Form 标签

【发布时间】：2017-07-16 22:00:00

【问题描述】：

你好！

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

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

谢谢！

编辑：

例如，您是否看到 [checked]="team.original" 和 [disabled]="!group.internal" 根据其价值，它们不起作用。同样对于“原始”列，我打印实际值 - 'false'，但检查了 chackbox。

【问题讨论】：

您的意思是“不能正常工作”？预期的行为是什么？您会得到什么？

O 它在 plnkr 示例中。您是否看到 [checked]="team.original" 和 [disabled]="!group.internal" 如果标记包含在

【参考方案1】：

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

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

和name 属性

name="readi"

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

readi 最终会是 read0 仍然不能解决您的问题，因为它会被评估为一个相同的表单名称。因此，您需要为***迭代和嵌套迭代使用两个索引：

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

和

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

并标记您的name 属性：

name="readji"

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

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

这就是表单的工作方式。所有名称都必须是唯一的。

这是你的分叉Plunker