angular - Angular Reactive Forms - FormArray 从另一个索引开始

Question

我有一个发票模板，如果服务字段不再适合第一页，我想从第二页上的另一个索引开始。例如，如果在第 1 页创建了 12 个服务字段，则请在第 2 页（第 13 个元素）添加一个新的服务对象。现在，它显示了第二页上 formArray 的第一个元素。我将反应形式与 formArray 一起使用。

请查看我在 Stackblitz 上的代码： https ://stackblitz.com/edit/angular-invoice?file=src/app/app.component.html

我为第二页和其他页面创建了另一个模板：

<ng-template #sndPage>
        <div id="{{ i+1 }}" class="page">
            <div class="content">
                <div resizeObserver (resize)="onResize($event)">
                    <h1>Another Page</h1>
                    <form [formGroup]="invoiceForm" (ngSubmit)="onSubmit()">
                        <div class="service-table" formArrayName="services">
                            <ng-container 
                                *ngFor="let service of services.controls | slice:13; let j = index;" <- How to change the start index?
                                [formGroupName]="j" 
                            >
                            <div id="service" *ngIf="page.growth; else elseBlock" >   
                                
                                <div class="pos">Pos.: {{page.start + j+1}} </div>
                                <textarea 
                                    class="title"
                                    formControlName="title"

                                    autosize
                                    [minRows]="1"

                                    placeholder="Caption2"
                                >
                                </textarea>
                                <textarea 
                                    class="detail"
                                    formControlName="detail"

                                    autosize
                                    [minRows]="1"

                                    placeholder="Describe2"

                                >
                                </textarea>
                                <div class="price">
                                    <input
                                        class="price"
                                        formControlName="price"
                                        AutoSizeInput
                                        placeholder="Price"
                                    >
                                </div>
                            </div>
                            <ng-template #elseBlock>
                                <div id="service" *ngIf="page.start + j < page.lastServiceElement">   
                                
                                    <div class="pos">Pos.: {{page.start + j+1}}</div>
                                    <textarea 
                                        class="title"
                                        formControlName="title"

                                        autosize
                                        [minRows]="1"

                                        placeholder="caption2"
                                    >
                                    </textarea>
                                    <textarea 
                                        class="detail"
                                        formControlName="detail"

                                        autosize
                                        [minRows]="1"

                                        placeholder="Describe2"

                                    >
                                    </textarea>
                                    <div class="price">
                                        <input
                                            class="price"
                                            formControlName="price"
                                            AutoSizeInput
                                            placeholder="Price"
                                        >
                                    </div>
                                </div>
                            </ng-template>
                        </ng-container>
                        <button mat-icon-button type="button" color="accent" *ngIf="page.growth" (click)="addService()"> 
                            <mat-icon>add_circle_outline</mat-icon>
                        </button>
                        </div>
                        <button type="submit" [disabled]="!invoiceForm.valid">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </ng-template>

我也猜想切片管道不适用于formArray。我设置数字 (13) 仅用于测试。

奖励：如果“最后一个”服务描述字段不适合第一页，有没有一种好方法可以继续下一页的描述字段？

标签： angularangular-reactive-formsinvoiceangular-templateformarray