在Angular中制作editForm的最简单方法是什么？

在我的数据库中，我有许多用户，其中有很多食谱。每个食谱都有一些特性和成分的集合。下面是截图

具有所有属性的食谱

因此，当用户在页面上显示要编辑的配方时，应该会显示（窗体）已加载当前数据的配方。这是一种工作方式，因为我可以看到数据，但我认为这做得不好。

我有没有数组（成分）的工作正常的形式。您能告诉我如何在编辑表单中添加成分吗？

如果您能看到我的代码并给我反馈并暗示我应该改变的地方，我将不胜感激。

export class RecipeEditComponent implements OnInit {
  @ViewChild('editForm') editForm: NgForm;
  recipe: IRecipe;
  photos: IPhoto[] = [];
  ingredients: IIngredient[] = [];
  uploader: FileUploader;
  hasBaseDropZoneOver = false;
  baseUrl = environment.apiUrl;
  
  currentMain: IPhoto;
  constructor(private route: ActivatedRoute, private recipeService: RecipeService,
    private toastr: ToastrService) { }

  ngOnInit(): void {
    this.loadRecipe();  
  }

  loadRecipe() {
    this.recipeService.getRecipe(this.route.snapshot.params.id).subscribe(recipe => {
      this.recipe = recipe;
      this.initializeUploader();
    })
  }
  updateRecipe(id: number) {
    this.recipeService.editRecipe(id, this.recipe).subscribe(next => {
      this.toastr.success('Recipe updated successfully');
      this.editForm.reset(this.recipe);
    }, error => {
      this.toastr.error(error);
    });
  }

}

的HTML

<div class="container mt-4 border" *ngIf="recipe">
    <form #editForm="ngForm" id="editForm" (ngSubmit)="updateRecipe(recipe.id)" >
      <h5 class=" text-center mt-2">Recipe details:</h5>
        <div class="form-group mt-3">
          <label for="city">Name</label>
          <input class="form-control" type="text" name="name" [(ngModel)]="recipe.name">
        </div>
        <div class="form-group">
          <app-ingredient-editor [ingredients] = "recipe.ingredients"></app-ingredient-editor>
          <div *ngFor="let ingredient of recipe.ingredients; let i = index">

            <input class="form-control" type="text" name="{{ingredient.name}}" [(ngModel)]="ingredient.name">
            <input class="form-control" type="text" name="{{ingredient.amount}}" [(ngModel)]="ingredient.amount">
          </div>
        </div>
        <div class="form-group">
          <br>
          <p>Add recipes</p>
        </div>
      <h5 class=" text-center mt-4">Description</h5>
        <angular-editor cols=100% rows="6" [placeholder]="'Your description'" [(ngModel)]="recipe.description"  name="description"></angular-editor>
    </form>  

    <button [disabled]="!editForm.dirty" form="editForm" class="btn btn-success btn-block mb-5 mt-5">Save changes</button>
  </div>

现在看起来像：

页面上的表格

当我在控制台上更改时删除成分名称时，出现以下错误：

recipe-edit.component.html:12 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

问题是那部分代码：

 <div *ngFor="let ingredient of recipe.ingredients; let i = index">
    
                <input class="form-control" type="text" name="{{ingredient.name}}" [(ngModel)]="ingredient.name">
                <input class="form-control" type="text" name="{{ingredient.amount}}" [(ngModel)]="ingredient.amount">
              </div>
            </div>

但是我不知道如何使它工作。

如何将添加数组添加到模板驱动的窗体？ 就我而言，我需要显示当前成分并能够对其进行编辑。

我已经尝试过这样的事情：

<input class="form-control" type="text" name="ingredient[i].name" [(ngModel)]="ingredient[i].name">
            <input class="form-control" type="text" name="ingredient[i].amount" [(ngModel)]="ingredient[i].amount">

但是id不起作用