Angular 2+：在ngFor循环中通过验证独立访问反应形式

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。Devner希望对此问题引起更多关注：“期待一个解决方案，该解决方案将解决上述问题以及适当的验证。”

我正在使用反应式表单。我有2组数据。它们是：

1. 项目列表-包含项目ID和项目名称
2. 组列表-包含组ID和组名称

这是我想要做的：

1. 在用户界面中，我遍历项目并显示项目ID和项目名称。效果很好。
2. 我正在遍历组并在“选择”框中显示组ID和组名称。也可以正常工作。
3. 假设我单击第一个“选择”框，目的是从“第一项”的列表中选择一个组。然后，我没有单击显示的任何选项，而是单击了页面上的其他位置。 此操作也会在页面上显示所有其他表单控件/选择框的错误消息。如果我为其他任何选择框选择一个值，那么即使第一个下拉列表也将清除错误消息。 这是问题。

问题总结：

我正在尝试修复表单的（上面的）关联行为，以便每个表单在循环中应独立于另一个表单工作，并且在选择一个组后，当“ Assign Group”单击按钮后，我试图仅访问已提交表单的相应项目ID和组ID，而不访问其他表单。如何实现？

问题的实时演示：

我已经设置了复制问题的StackBlitz demo here。

实时演示编辑代码：

这里是Live Demo Editor code

Answer 1

您在模板内部使用的循环正在使用相同的FormControl创建多个表单。有两种方法可以解决此问题，一种方法是使用FormArray，但我认为使用item_id属性作为FormControl id是最简单的方法，您可以使用form.controls[id]

访问模板中的控件。

  form: FormGroup = new FormGroup({});
  allData = [
            {
                "item_name": "Test 1",
                "item_id": "1",
            },
            {
                "item_name": "Test 2",
                "item_id": "2",
            },
            {
                "item_name": "Test 3",
                "item_id": "3",
            },
            {
                "item_name": "Test 4",
                "item_id": "4",
            },
            {
                "item_name": "Test 5",
                "item_id": "5",
            },
        ];
  allDataGroups = [
            {
                "display_name": "Group 1",
                "group_id": "1",
            },
            {
                "display_name": "Group 2",
                "group_id": "2",
            },
            {
                "display_name": "Group 3",
                "group_id": "3",
            }
        ];

  constructor() {
    this.createFormControls()
  }

  private createFormControls() {
    for (const datum of this.allData) {
      const id = datum.item_id;
      this.form.addControl(id, new FormControl())
    }
  }

<div class="container">
  <form [formGroup]="form">
    <div *ngFor="let datum of allData">
      <span>{{ datum.item_name }} / Item ID #{{ datum.item_id }}</span>
      <select style="display: block" [formControlName]="datum.item_id">
        <option *ngFor="let group of allDataGroups" [value]="group.group_id">
          {{ group.display_name }}
        </option>
      </select>
      <button>Assign Group</button>
    </div>
  </form>
</div>