Angular 如何创建多维角度4格式阵列？

我正在使用ng formly npm工具创建动态表单。我希望这个表单被划分为部分和选项卡，但仍然有一个提交按钮。一个标签。现在，我根据该库的文档进行操作。我已经创建了这个名为TabType的接口，它保存特定选项卡的diff字段

      export interface TabType {
            label: string;
           fields: FormlyFieldConfig[]
        }

现在，使用下面的变量和模式，我能够生成表单，该表单使用上面的TabType接口分为不同的部分

       form = new FormGroup({});
      model = {};
           options: FormlyFormOptions = {};


       tabs: TabType[] = [
{
  label: 'Personal data',
  fields: [

      {
        className: '',
        template: '<strong>Basic Information:</strong>',
      },

         {
            fieldGroupClassName: '',
            fieldGroup: [
              {
                className: 'mdc-text-field__input',
                type: 'input',
                key: 'firstName',
                templateOptions: {
                  label: 'First Name',
                },
               },

              {
                className: 'mdc-text-field__input',
                type: 'input',
                key: 'lastName',
                templateOptions: {
                  label: 'Last Name',
                },
                expressionProperties: {
                  'templateOptions.disabled': '!model.firstName',
                },
              },
            ],
        },


{
  className: '',
  template: '<strong>Address:</strong>',
},
{
  fieldGroupClassName: '',
  fieldGroup: [
    {
      className: 'row',
      type: 'input',
      key: 'street',
      templateOptions: {
        label: 'Street',
      },
    },
    {
      className: 'mdc-text-field__input',
      type: 'input',
      key: 'cityName',
      templateOptions: {
        label: 'City',
      },
    },
    {
      className: 'mdc-text-field__input',
      type: 'input',
      key: 'zip',
      templateOptions: {
        type: 'number',
        label: 'Zip',
        max: 99999,
        min: 0,
        pattern: '\\d{5}',
      },
    },
  ],
},


 {
  className: '',
  template: '<strong>Other Inputs:</strong>',
},
{
  type: 'textarea',
  key: 'otherInput',
  templateOptions: {
    label: 'Other Input',
  },
},
{
  type: 'checkbox',
  key: 'otherToo',
  templateOptions: {
    label: 'Other Checkbox',
  },
},


  ],
},


{
  label: 'Destination',
  fields: [
    {
      key: 'country',
      type: 'input',
      templateOptions: {
        label: 'Country',
        required: true,
      },
    },
  ],
},
{
  label: 'Day of the trip',
  fields: [
    {
      key: 'day',
      type: 'input',
      templateOptions: {
        type: 'date',
        label: 'Day of the trip',
        required: true,
      },
    },
  ],
},
 ];

最后，在HTML文件中，我有下面的代码，这些代码通过tab以及名为“tabs”数组的TabType进行解析，并访问所需的表单字段来呈现它

                     <div class="mdc-card">
                          <section class="mdc-card__primary view-section">
                              <h3>{{tab.label}}</h3>
                          </section>
                          <section class="mdc-card__supporting-text view-section-body">

                               <formly-form 
                                [form]="form.at(index)"
                                [model]="model"
                                [fields]="tab.fields"
                                [options]="options">
                              </formly-form>

                          </section>
                      </div>
                  </div>

---

现在，上面的基本表单有所有三个选项卡数据（虽然相同），您能否帮助它以数组的形式传递它，以便我可以遍历它，因为我认为我无法在html中迭代formgroup对象。

您应该将表单分为选项卡，比方说，您的基本表单如下所示：

// fb: FormBuilder     
const baseForm: FormGroup = this.fb.group({})

您的主要目标是将表单划分为选项卡，因此有必要对所有选项卡进行迭代，这就是为什么您需要在表单中使用选项卡数组的原因

const baseForm: FormGroup = this.fb.group({
    tabs: this.fb.array([])
})

此表单数组应包含属于特定选项卡的所有字段。。。它将包含一个表单组列表

const baseForm: FormGroup = this.fb.group({
    tabs: this.fb.array([
       this.fb.group({
         f1: this.fb.control("value"),
         g2: this.fb.group({ 
           f2: this.fb.control("value")
         }),
         a3: this.form.array([])
       })
    ])
})

此解决方案使用的是ReactivesFormsModule

编辑： html看起来像

<form class="ui form form-group" [formGroup]="baseForm">
  <div formArrayName="tabs">
    <div *ngFor="let tabGroup of tabs.controls; let i=index" [formGroupName]="i">
     <input type="text" formControlName="f1">
     <div [formGroup]="g2">
        <input type="text" formControlName="f2">
     </div>
      <div formArrayName="a3">
       .....// other form group
      </div>
   </div>
  </>
</form>

..…//其他形式组

我尝试创建另一个名为ALLTABTYPES的接口，但它没有映射到tabstype接口。嘿，Richardo，谢谢你的回答。你的意思是说我应该从已经嵌套的表单数组中创建表单组，而不是从表单组中创建formarray？我也应该使用formbuilder？好的，那么我将如何访问html中的嵌套结构？就像我所做的那样？？？是的，我真的很喜欢使用反应式表单，而formbuilder在创建我的反应式表单方面帮了我很大的忙，我认为它会更干净地处理。。。您需要呈现的是，当您要从表单中获取数据时，这些值将由tabsYup分隔，这样就可以通过将每个tabs值附加到一个公共数组或字符串来处理，然后可以作为json发送。我唯一的疑问是我使用的ng formly工具是否会接受表单模型？我将如何在html中解析它？我希望我添加的html示例将帮助您理解它

const baseForm: FormGroup = this.fb.group({
    tabs: this.fb.array([
       this.fb.group({
         f1: this.fb.control("value"),
         g2: this.fb.group({ 
           f2: this.fb.control("value")
         }),
         a3: this.form.array([])
       })
    ])
})

<form class="ui form form-group" [formGroup]="baseForm">
  <div formArrayName="tabs">
    <div *ngFor="let tabGroup of tabs.controls; let i=index" [formGroupName]="i">
     <input type="text" formControlName="f1">
     <div [formGroup]="g2">
        <input type="text" formControlName="f2">
     </div>
      <div formArrayName="a3">
       .....// other form group
      </div>
   </div>
  </>
</form>