角度，反应形式循环中的错误

Question

我正在使用

Angular CLI version 16.2.1

。
我正在学习一门课程，并且正在使用反应形式：在“食谱”列表中，我需要添加一个包含一些输入和成分列表的食谱。问题是，每次我尝试添加成分（使用 *ngFor 控件）时，我都会收到错误

HTML

<div class="row">
    <div class="col-xs-12" formArrayName="ingredients">
        <div class="row" *ngFor="let ingredientCtrl of getControls(); let i = index" [formGroupName]="i" style="margin-top: 10px;">
            <div class="col-xs-8">
                <input type="text" class="form-control" formControlName="name">
            </div>
            <div class="col-xs-2">
                <input type="number" class="form-control" formControlName="amount">
            </div>
            <div class="col-xs-2">
                <button class="btn btn-danger">X</button>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12">
                <button type="button" class="btn btn-success" (click)="onAddIngredient()">Add Ingredient</button>
            </div>
        </div>
    </div>
</div>

TypeScript（仅包含代码，无需导入）

private initForm() {
    let recipeName = '';
    let recipeImagePath = '';
    let recipeDescription = '';
    let recipeIngredients = new FormArray([]);

    if(this.editMode) {
        const recipe = this.recipeService.getRecipe(this.id);
        recipeName = recipe.name;
        recipeImagePath = recipe.imagePath;
        recipeDescription = recipe.description;
        if(recipe['ingredients']) {
            for (const ingredient of recipe['ingredients']) {
                recipeIngredients.push(new FormGroup({
                    'name': new FormControl(ingredient.name, Validators.required),
                    'amount': new FormControl(ingredient.amount, [Validators.required, Validators.pattern(/^[1-9]+[0-9]*$/)])
                }));
            }
        }
    }

    this.recipeForm = new FormGroup({
        'name': new FormControl(recipeName, Validators.required),
        'imagePath': new FormControl(recipeImagePath, Validators.required),
        'description': new FormControl(recipeDescription, Validators.required),
        'ingredients': recipeIngredients
    })
}

getControls() {
    return (<FormArray>this.recipeForm.get('ingredients'))?.controls;
}

onAddIngredient() {
    (<FormArray>this.recipeForm.get('ingredients'))?.push({
        'name': new FormControl(null, Validators.required),
        'amount': new FormControl(null, [Validators.required, Validators.pattern(/^[1-9]+[0-9]*$/)])
    })
}

查看和错误

知道如何解决这个问题吗？

Answer 1

在

onAddIngredient

方法中，您应该将

FormGroup

实例添加到

FormArray

中，但您现有的代码正在将对象添加到

FormArray

中。

onAddIngredient() {
  let fg: FormGroup<any> = new FormGroup({
    name: new FormControl(null, Validators.required),
    amount: new FormControl(null, [
      Validators.required,
      Validators.pattern(/^[1-9]+[0-9]*$/),
    ]),
  });

  (<FormArray>this.recipeForm.get('ingredients'))?.push(fg);
}

演示@StackBlitz