Javascript 角度窗体组：找不到具有未指定名称属性的控件

我的Angular应用程序有问题。 我正在尝试创建3个表单。 这是我的模板：

<div *ngFor="let item of formNames; index as i" >
    {{formNames[i]}}
<form [formGroup]='formFields[i]'>      
  <label>          
      Name:
     <input type="text" [formControl]="formFields[i].name">
  </label>      
   <label>
  All:
  <input type="text" [formControl]="formFields[i].all">      
</label>
<label>
   Done:
  <input type="text" [formControl]="formFields[i].done">      
</label>
<label>
  Ctrl:
  <input type="text" [formControl]="formFields[i].ctrl">      
</label>
<label>
  Rjct:
  <input type="text" [formControl]="formFields[i].rjct">      
</label>
</form>
</div>

{{formNames[i]}
姓名：
全部：
完成：
Ctrl:
Rjct：

问题是当页面加载时，它只呈现第一个{{formnames[i]}。控制台显示“错误：找不到具有未指定名称属性的控件”

以下是我用于呈现FormGroups的代码：

export class TableDataFormComponent {
  formFields: Array<any> = fields;
  formNames = FORMINPUTS;
  say = f; 
}

let f = function() {console.log(this.formFields); };

const FORMINPUTS: Array<string> = [];

TableHeaders.HEADERS.forEach((item) => {
  FORMINPUTS.push(item);
});

let fields: Array<FormGroup> = [];

for (let i = 0; i < FORMINPUTS.length; i++) {
    fields[i] = new FormGroup({
    name: new FormControl(''),
    all: new FormControl(''),
    done: new FormControl(''),
    ctrl: new FormControl(''),
    rjct: new FormControl('')
  });
}

导出类TableDataFormComponent{
表单字段：数组

出于某种原因，Stackblitz不适用于我的项目，但源代码如下：

我不明白为什么数据在与按钮或输入元素交互后呈现。它以某种方式触发了新表单组的创建。
显然，我需要同时创建它们，而不需要与DOM交互。
有人遇到过同样的问题吗？我该怎么解决这个问题？
非常感谢您的帮助
您最好的选择是使用FormBuilder

this.formBuilder.array（[this.createItem（）]）

您的模板将需要使用

formarayname=“fields”
和
[formGroupName]=“i”

有关更多详细信息，请参阅本文：

从
表单
标记中删除
[formGroup]='formFields[i]
。
createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    all: '',
    done: '',
    ...
  });
}