找不到带有路径的控件："成分 -> 0 -> 0"

Question

我正在尝试为食谱构建一个带有成分嵌套动态输入的表单。我不知道我做错了什么。这是浏览器控制台的错误：

Cannot find control with path: 'ingredients -> 0 -> 0'

这是我的网页

<div formArrayName="ingredients">
<div *ngFor="let ingredient of recipeForm.get('ingredients')['controls']; let i=index" [formGroupName]="i">
<!-- address header, show remove button when more than one address available -->
<div>
<span>Zutat {{i + 1}}</span>
<!-- <span *ngIf="recipeForm.get('ingredients')['controls'].length > 1" (click)="removeIngredient(i)">
</span> -->
</div>
<!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
<div [formGroupName]="i">
<!--ingredient-->
<div [formGroup]="ingredient">
<div class="form-group col-xs-6">
<input type="text" class="form-control" formControlName="newIngredient">
</div>
<div class="btn btn-success" (onclick)="addIngredient()">neue Zutat</div>
</div>
</div>
</div>
</div>

这是我的 TS 文件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validator, Validators } from '@angular/forms';
import { NewRecipe } from '../recipe.interface';
import { validateConfig } from '@angular/router/src/config';


@Component({
selector: 'app-recipe-creator',
templateUrl: './recipe-creator.component.html',
styleUrls: ['./recipe-creator.component.css']
})
export class RecipeCreatorComponent implements OnInit {
constructor(private formBuilder: FormBuilder) {}
recipeForm: FormGroup;
ingredients: FormArray;
instructions: FormArray;
ngOnInit() {
this.recipeForm = this.formBuilder.group({
name: '',
category: '',
prep_time: 0,
cooking_time: 0,
price: 0,
ingredients: this.formBuilder.array([this.createIngredient()]),
instructions: this.formBuilder.array([this.createInstruction()])
});
}
createIngredient(): FormGroup {
return this.formBuilder.group({
newIngredient: ['']
});
}
createInstruction(): FormGroup {
return this.formBuilder.group({
newInstruction: ['']
});
}
addIngredient(): void {
this.ingredients = this.recipeForm.get('ingredient') as FormArray;
this.ingredients.push(this.createIngredient());
}
addInstruction(): void {
this.instructions = this.recipeForm.get('instruction') as FormArray;
this.instructions.push(this.createInstruction());
}
saveRecipe() {}
removeIngredient(i) {}
}

我对角度很陌生，这让我发疯。所有表单的教程都有 Angular 6 似乎不支持的代码。是否有关于在任何地方使用 FormArray 嵌套表单的更新教程？

提前谢谢。

Answer 1

我在项目中遇到了类似的问题。就我而言，我没有为数组内的每种成分创建一个组。即数组直接包含对成分列表的引用。 为什么要在 createIngRedient() 中分配一个数组？这可能会引起一些混乱。相反，我相信你应该返回一个新的成分对象，即this.formBuilder.group(new Ingredient(''，0))。

基于反应式表单文档，我对这个项目的实现如下：

export class RecipeEditComponent implements OnInit {
id: number;
editMode = false;
recipeForm: FormGroup;
constructor(private route: ActivatedRoute, private fb: FormBuilder, private recipeService: RecipeService) { }
ngOnInit() {
this.route.params.subscribe((p) => {
console.log(p['id']);
if(p['id'] !== undefined){
this.editMode = true;
this.id = Number(p['id']);
}
console.log('new mode: ' + !this.editMode);
});
this.recipeForm = this.fb.group({
name: '',
imageUrl: '',
description: '',
ingredients: this.fb.array([]),
});
if(this.editMode){
const recipe = this.recipeService.getRecipeById(this.id);
const ingsTemp = recipe.ingredients.map(ip => this.fb.group(ip));
const ingredientsFormsArray = this.fb.array(ingsTemp);
this.recipeForm.setControl('ingredients', ingredientsFormsArray);
this.recipeForm.patchValue({
name: recipe.name,
imageUrl: recipe.imagePath,
description: recipe.description,
});
console.log(ingredientsFormsArray);
console.log(this.ingredients);
}
}
onSubmit() {
console.log(this.recipeForm.get('ingredients'));
}
get ingredients(){
return this.recipeForm.get('ingredients') as FormArray;
}
}

在模板中，

<div formArrayName="ingredients">
<div *ngFor="let ingredient of ingredients.controls; let i = index" [formGroupName]="i">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-8">
<div class="form-group">
<input type="text" class="form-control" formControlName="name">
</div>
</div>
<div class="col-2">
<div class="form-group">
<input type="number" class="form-control" formControlName="amount">
</div>
</div>
<div class="col-2">
<div class="form-group">
<button type="button" class="btn btn-danger">X</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

就我而言，我错过了以下步骤：

const ingsTemp = recipe.ingredients.map(ip => this.fb.group(ip));