Angular 17循环中用FormGroup填充FormArray报错求助

问题描述 #

在Angular 17中填充FormArray时触发类型错误：

类型为'FormGroup<{ name: FormControl<string | null>; amount: FormControl<number | null>; }>'的参数不能赋值给类型'never'的参数.ts(2345)

错误发生在将包含FormControls的FormGroup推入FormArray的代码行，尝试过FormBuilder创建组、手动类型转换均无效。

问题原因 #

Angular 17配合TypeScript的严格类型推断，直接通过new FormArray([])初始化时，TS会默认推断其类型为FormArray<never>——因为没有初始元素来推导内部控件的类型，后续推入FormGroup时自然会触发类型不匹配。

解决方案 #

方案1：显式指定FormArray的泛型类型 #

修改FormArray初始化代码，明确声明内部控件的类型：

let recipeIngredients = new FormArray<FormGroup<{
  name: FormControl<string | null>;
  amount: FormControl<number | null>;
}>>([]);

方案2：使用FormBuilder配合类型定义（更简洁） #

先注入FormBuilder，再用其array方法初始化并指定类型：

1. 在构造函数中添加FormBuilder依赖：

constructor(
  private route: ActivatedRoute,
  private recipeService: RecipeService,
  private fb: FormBuilder // 新增依赖
){}

2. 修改FormArray初始化及元素推入逻辑：

// 替换原FormArray初始化代码
let recipeIngredients = this.fb.array<FormGroup<{
  name: FormControl<string | null>;
  amount: FormControl<number | null>;
}>>([]);

// 推入元素时用fb.group简化代码
recipeIngredients.push(this.fb.group({
  name: [ingredient.name],
  amount: [ingredient.amount]
}));

方案3：创建类型别名复用（易维护） #

先定义通用的表单组类型，再用于FormArray：

// 在组件顶部定义类型别名
type IngredientFormGroup = FormGroup<{
  name: FormControl<string | null>;
  amount: FormControl<number | null>;
}>;

// 初始化FormArray时使用该类型
let recipeIngredients = new FormArray<IngredientFormGroup>([]);

修正后的完整代码 #

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute, Params } from '@angular/router';
import { RecipeService } from '../recipe.service';

@Component({
  selector: 'app-recipe-edit',
  templateUrl: './recipe-edit.component.html',
  styleUrl: './recipe-edit.component.css'
})
export class RecipeEditComponent implements OnInit{
  id!: number
  editMode = false
  recipeForm!:FormGroup

  constructor(
    private route: ActivatedRoute,
    private recipeService: RecipeService
  ){}

  ngOnInit(): void {
    this.route.params.subscribe(
      (params: Params) => {
        this.id = +params['id']
        this.editMode = params['id'] != null
        this.initForm()
      }
    )
  }

  private initForm(){
    let recipeName = ''
    let recipeImagePath = ''
    let recipeDescription = ''
    // 显式指定FormArray泛型类型
    let recipeIngredients = new FormArray<FormGroup<{
      name: FormControl<string | null>;
      amount: FormControl<number | null>;
    }>>([]);

    if(this.editMode){
      const recipe = this.recipeService.getRecipe(this.id)
      recipeName = recipe.name
      recipeImagePath = recipe.imagePath
      recipeDescription = recipe.description
      if(recipe['ingredients']){
        for(let ingredient of recipe['ingredients']){
          recipeIngredients.push( new FormGroup({
            'name':  new FormControl(ingredient.name),
            'amount': new FormControl(ingredient.amount)
          }) ); // 修正原代码中的语法错误
        }
      }
    }
    this.recipeForm = new FormGroup({
      'name': new FormControl(recipeName),
      'imagePath': new FormControl(recipeImagePath),
      'description': new FormControl(recipeDescription),
      'ingredients': recipeIngredients
    })
  }

  get controls() {
    return (this.recipeForm.get('ingredients') as FormArray).controls;
  }

  onSubmit(){
    console.log(this.recipeForm)
  }

}

说明 #

该错误并非Angular 17的隐藏问题，而是TypeScript严格类型推断的正常表现，通过显式指定FormArray的泛型类型即可彻底解决。

内容的提问来源于stack exchange，提问作者Jose Luis Roman