Angular 14向FormArray推送FormGroup遇ts(2345)类型错误的解决方法

这个错误的核心原因是：TypeScript无法自动推断空FormArray的元素类型，默认将其元素类型设为never，导致你推送FormGroup时出现类型不兼容问题。以下是几种可行的解决方法：

方法1：显式指定FormArray的元素类型 #

先定义一个类型别名让代码更清晰，再给FormArray指定明确的元素类型：

// 定义食材表单组的类型别名
type IngredientFormGroup = FormGroup<{
  name: FormControl<string | null>;
  amount: FormControl<number | null>;
}>;

private initForm() {
    let recipeName = '';
    let recipeImagePath = '';
    let recipeDescription = '';
    // 显式指定FormArray的元素类型
    let recipeIngredients = new FormArray<IngredientFormGroup>([]);
    

    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 // 记得取消注释，把数组加入表单
      });
      
    }
}

方法2：使用类型断言快速解决 #

如果不想定义额外的类型别名，可以直接用as断言指定FormArray的类型：

private initForm() {
    let recipeName = '';
    let recipeImagePath = '';
    let recipeDescription = '';
    // 用类型断言指定FormArray的元素类型
    let recipeIngredients = new FormArray([]) as FormArray<FormGroup<{
      name: FormControl<string | null>;
      amount: FormControl<number | null>;
    }>>;
    

    if (this.editMode) {
      // ... 其余代码保持不变
    }
}

方法3：借助FormBuilder自动推断类型 #

如果你的组件中注入了FormBuilder，用它创建表单能让TypeScript自动推断类型，更简洁：

// 先在组件构造函数中注入FormBuilder
constructor(private fb: FormBuilder) {}

private initForm() {
    let recipeName = '';
    let recipeImagePath = '';
    let recipeDescription = '';
    // 用FormBuilder创建数组，自动推断类型
    let recipeIngredients = this.fb.array([]);
    

    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){
          // 用FormBuilder创建FormGroup
          recipeIngredients.push(this.fb.group({
            name: ingredient.name,
            amount: ingredient.amount
          }))
        }
      }

      this.recipeForm = this.fb.group({
        name: recipeName,
        imagePath: recipeImagePath,
        description: recipeDescription,
        ingredients: recipeIngredients
      });
      
    }
}

内容的提问来源于stack exchange，提问作者WAQAR Hussain