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

我在Angular中使用反应形式，有一个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模板中呈现这些表单控件（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>

{{key}}
拯救

现在，我已经在这里硬编码了formControlName，但我希望在HTML中循环所有控件。我知道如果这是正式安排，我们可以循环讨论这个问题，但既然不是，我该如何继续

---

提前感谢您的帮助。

谢谢@yurzui。。。如果高级as变量中也有formgroup名称呢？我们如何满足这一需求？例如，区域1和区域2不是不断更新的示例。正如您所看到的，您可以动态构建任何结构。非常感谢@yurzui@yurzui当我使用您提供的HTML模板时，它会显示一个输入框，框中附加了基本部分的所有formcontrol值。