我们如何循环表单组中的各个表单控件？

Question

我在Angular中使用Reactive表单，并且有一个formGroup对象，如下所示：

form = this.fb.group({
  Basic: this.fb.group ({
    net1: '',
    net2: ''
  }),
  Advanced: this.fb.group ({
    Area1: this.fb.group ({ 
      key1: 'test',
      key2: 'pass'
    }),
    Area2: this.fb.group ({
      key3: ''
  })
})

formgroup对象是动态的，此处的键名称可能会更改（基于服务器响应）。如何在我的HTML模板中呈现这些formcontrols（net1，net2，key1，key2 ...）？

我不确定如何在HTML中解析它们？

我现在使用的HTML看起来像：

<div>
  <form (ngSubmit)="onSubmit()" [formGroup]="form">
  <div formGroupName="Basic">
    <h1>{{key}}</h1>
    <input type="textbox" formControlName="net1">
    <input type="textbox" formControlName="net2">
  </div>

  <div class="form-row">
    <button type="submit" [disabled]="!form.valid">Save</button>
  </div>
  </form>
</div>

现在我已经在这里对formControlName进行了硬编码，但我想循环遍历HTML中的所有控件。我知道如果这是FormArray我们可以循环这个但是因为它不是，我该怎么办？

感谢您提前提供任何帮助。