Question

我正在使用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,
      },
    },
  ],
},
 ];

现在创建了这个变量后，我创建了一个名为'form'的One FormArray，就像这样，

      form = new FormArray(this.tabs.map(() => new FormGroup({})));

最后在HTML文件中，我有下面的代码，它通过选项卡解析TabType，称为'tabs'数组，并访问所需的表单字段来呈现它。

                     <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>

现在我想再对表单元素进行一次迭代，并希望在选项卡中划分字段。在上面你可以看到它正在创建部分。

所以我看到的问题是，如果我们可以创建多维FormArray，那么我们可以使用选项卡列表进行迭代，我们使用上面的部分列表完成。

有人可以建议我这样做吗？

更新：

        form = new FormArray(this.tabs.map(() => new FormGroup({})));

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

现在上面的baseForm有三个标签数据（尽管相同），你能帮忙把它作为数组传递给我，以便我可以遍历它，因为我不认为我能够在html中迭代formgroup对象。 / p>

Answer 1

您应该在标签中划分您的表单，比方说，您的基本表单将如下所示：

// 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>

如何创建多维角度4 FormArray？

1 个答案: