0

我正在使用 ng-formly npm 工具创建动态表单。我希望此表单分为部分和选项卡，但仍然有一个提交按钮。即单个标签。现在我根据该库的文档。我创建了这个名为 TabType 的接口，它包含特定选项卡的差异字段。

      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”的 FormArray，如下所示，

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

最后在 HTML 文件中，我有下面的代码，它通过选项卡解析以及称为“选项卡”数组的 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>

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

所以我看到的问题是，如果我们可以创建多维 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 对象。

4

1 回答 1

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>
于 2018-02-20T13:53:24.707 回答