在 Angular 17 中创建动态表单时出错

Question

我想创建一个动态表单，它是付款数组，用户可以添加新付款、从数组中删除并进行编辑。

我的 HTML：

<form [formGroup]="createLoanPaymentsForm" (ngSubmit)="createLoan()">
    <ng-container formArrayName="createLoanPaymentsForm">
        @for (
            createLoanPaymentForm of createLoanPaymentsForm.controls; // here is the error
            track $index
        ) {
            <div [formGroup]="createLoanPaymentForm">
                <mat-form-field appearance="fill">
                    <input matInput formControlName="title" placeholder="Lesson title" />
                </mat-form-field>
            </div>
        }
        <button mat-mini-fab (click)="addPayment()">Add</button>
    </ng-container>
</form>

我的组件的配置：

@Component({
    selector: 'app-create-loan-dialog',
    standalone: true,
    imports: [
        MatInputModule,
        MatButtonModule,
        MatDialogTitle,
        MatDialogContent,
        MatDialogActions,
        MatDialogClose,
        ReactiveFormsModule,
        MatStepperModule,
    ],
    providers: [
        {
            provide: STEPPER_GLOBAL_OPTIONS,
            useValue: { showError: true },
        },
    ],
    templateUrl: './create-loan-dialog.component.html',
})

我的

FormGroup

：

createLoanPaymentsForm: FormGroup = this.formBuilder.group({
    payments: this.formBuilder.array([]),
});

我的循环中有一个错误，它说：

输入 '{ [key: string]: AbstractControl; }' 必须有一个返回迭代器的 'Symbol.iterator' 方法。

此错误的解决方案，可能是 Angular 17 中

FormArray

循环的正确配置

Answer 1

您的反应式表单 (HTML) 结构不正确：

1. formArrayName

   与“付款”：

   formArrayName="payments"

   。

2. 在

   @for

   循环中，您需要迭代

   payments.controls

   。

3. 在

   @for

   循环下，用

   FormGroup

   生成每个

   [formGroupName]="index"

   实例。

<form [formGroup]="createLoanPaymentsForm" (ngSubmit)="createLoan()">
  <ng-container formArrayName="payments">
    @for (payment of payments.controls; track payment; let index = $index) {
      <div [formGroupName]="index">

       ...

      </div>
    }
    <button mat-mini-fab (click)="addPayment()">Add</button>
  </ng-container>
</form>

get payments() {
  return this.createLoanPaymentsForm.controls['payments'] as FormArray;
}

演示@StackBlitz