嵌套动态formarray以ng动态形式在单独的模型中显示

时间:2019-05-20 12:06:09

标签: angular nested-forms ng-bootstrap dynamic-forms formgroups

我正在使用https://github.com/udos86/ng-dynamic-forms#form-arrays表单。正在构建这样的嵌套表单。

new DynamicFormArrayModel({
        id: 'attachmentFormArray',
        initialCount: 0,
        groupFactory: () => {
          return [
            new DynamicFormGroupModel({
              id: 'attachment',
              group: [
                this.getControl(attachmentControls, 0),
                this.getControl(attachmentControls, 1),
                this.getControl(attachmentControls, 2),
                this.getControl(attachmentControls, 3),
                new DynamicFormArrayModel({
                  id: 'payment',
                  groupFactory: () => {
                    return this.dfs.fromJSON(paymentControls);
                  }
                }),
              ]
            })];
        }
              })
 <dynamic-ng-bootstrap-form *ngIf="attachementFormGroup" [group]="attachementFormGroup" [model]="formModel"
                                     [layout]="formLayout">
            <ng-template modelId="attachmentFormArray" let-context="context" let-index="index">
              <button type="button" class="btn btn-success btn-sm rounded" (click)="addAnotherPayment(context, index)">
                <i class="fas fa-plus-circle"></i> Add Another Payment
              </button>
            </ng-template>
          </dynamic-ng-bootstrap-form>

<button type="button" class="btn btn-info btn-sm rounded" (click)="addAttachement()">
      <i class="fas fa-plus-circle"></i> Add New Attachement

this.getControl()方法将返回DynamicInput。

表单的行为如下:用户可以添加任意数量的附件,并且在每个附件中,用户可以动态添加任意数量的付款。 我面临的问题是如何在HTML中分别显示每个附件。 我正在使用这个

<dynamic-ng-bootstrap-form *ngIf="attachementFormGroup" [group]="attachementFormGroup" [model]="formModel"
                                     [layout]="formLayout">
            <ng-template modelId="attachmentFormArray" let-context="context" let-index="index">
              <button type="button" class="btn btn-success btn-sm rounded" (click)="addAnotherPayment(context, index)">
                <i class="fas fa-plus-circle"></i> Add Another Payment
              </button>
            </ng-template>
          </dynamic-ng-bootstrap-form>

但是formModel显示所有附件列表。我想在单独的引导卡中显示每个附件,并在每个附件中以嵌套引导卡显示付款。

0 个答案:

没有答案