我正在使用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显示所有附件列表。我想在单独的引导卡中显示每个附件,并在每个附件中以嵌套引导卡显示付款。