Angular：从matchList构建表单以保存结果

Question

我想构建一个没有结果的匹配的被动表单。

  

A队 - B队[输入目标A]：[输入目标B]

     

C队 - D队[输入目标C]：[输入目标D]

等等。当用户随后编辑一行中的两个字段时，应将完整结果发送到我的数据库。我怎样才能做到这一点？

我目前的状态：

ngOnInit() {
  this.formGroup = new FormGroup({});

  if (this.showResultInput && this.articles) {
    this.articles.forEach((article: IArticle) => {
      this.formGroup.addControl(article.$key  + '[homeGoals]', new FormControl());
      this.formGroup.addControl(article.$key  + '[guestGoals]', new FormControl());
  });

  this.formGroup.valueChanges.debounceTime(500).subscribe((resultArrayList: any) => {
    console.log(resultArrayList);
  });
}

和我的模板：

  <form [formGroup]="formGroup">
    <div *ngFor="let match of matches; let i = index;">
      {{match.title}}</a>
      <input type="number" [formControlName]="match.$key + '[homeGoals]'">
      <input type="number" [formControlName]="match.$key + '[guestGoals]'">
    </div
  </form>