类型 AbstractControl 不可分配给类型 FormGroup

Question

我有一个带有FormArray 的FormGroup 控件，其中填充了FormGroup 实例

  someForm = this.fb.group({
    days: this.fb.array([
      this.fb.group({
        description: ['']
      })
    ])
  })

另外，我有这个数组的吸气剂

  get days(): FormArray {
    return this.someForm.get('days') as FormArray;
  }

当我尝试遍历FormArray 并将其分配给[formGroup] 指令时，如this article 中所示

 <div *ngFor="let day of days.controls">
  <ng-container [formGroup]="day">
    ...

我来了

error TS2740: Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

Answer 1

我在this article 中找到了一种解决方法，通过index 遍历FormGroups，例如：

 <div *ngFor="let day of days.controls; let i=index">
      <ng-container [formGroupName]="i">
         ...

Answer 2

另一种解决方法是在组件中使用强制转换。

模板：

<ng-container [formGroup]="getFormGroup(day)">

组件：

getFormGroup(control: AbstractControl) { return control as FormGroup; }
 

这样我们仍然可以将控件用作在 ngFor for formArray 中循环的组件的输入值

<ng-container *ngFor="let day of days.controls">
    <childComponent [formGroup]="day"></childComponent>
</ng-container>

Answer 3

在这里，这就是我解决问题的方法。当您必须将 formGroup 也传递给子组件时，这种方法很有用

模板：

<ng-container formArrayName="days" *ngFor="let day of days;>
  <form [formGroup]="day"></form>
</ng-container>

组件：

  get days(): FormGroup[] {
       const formArray = this.someForm?.get('days') as FormArray;
       return formArray.controls as FormGroup[];
    }

这里我将 getter 中的控件返回为 FormGroup[]