Angular 我用的是带反应形式的角8。表单字段之一是FormArray，它在用户单击Add按钮时添加控件

我用的是带反应形式的角8。表单字段之一是FormArray，它在用户单击Add按钮时添加控件。添加控件时，数组中最后添加的元素看起来仍然链接到数据条目

private initForm(){
    this.ingredients = this.recipeService.getIngredientList();
    this.recipeForm = this.formBuilder.group({
      name: [''],
      imagePath: [''],
      description: [''],
      category: [''],
      recipeIngredients: this.formBuilder.array([
        this.initIngredients()        
      ])        
    });
  }
  removeFormControl(i){
    let userArray= this.recipeForm.controls.recipeIngredients as FormArray;
    userArray.removeAt(i);
  }

  addFormControl(){
    const control = <FormArray>this.recipeForm.controls['recipeIngredients'];
    control.push(this.initIngredients())

  }

  initIngredients(){
    return this.formBuilder.group({
      ingredientID: new FormControl(),
      quantity: new FormControl(),
      quantity_unit: new FormControl()
    });

private initForm（）{
this.components=this.recipesService.getIngredientList（）；
this.recipeForm=this.formBuilder.group({
姓名：['']，
图像路径：['']，
描述：['']，
类别：['']，
RecipeElements:this.formBuilder.array([
这个
])        
});
}
removeFormControl（一）{
让userArray=this.recipeForm.controls.RecipeInElements作为FormArray；
userArray.removeAt（i）；
}
addFormControl（）{
const control=this.recipeForm.controls['RecipeIngElements']；
control.push（this.initComponents（））
}
初始成分（）{
返回此.formBuilder.group({
IngreditId:新FormControl（），
数量：新FormControl（），
数量单位：新FormControl（）
});

选料
{{ing.Name}
量
选择统一
公斤
去除成分

“仍然链接到数据输入”的意思是您删除了一个控件，而不是添加了一个新控件？并且它仍然保留引用？@Jocelyn，删除输入的[（ngModel）]。您使用的是反应式表单，使用的是

this.recipeForm。

get（'recipefirements'）`而不是recipeForm.controls.recipefirements或this.recipeForm.controls['RecipeignElements']谢谢@Eliseo。我已经修好了。

<div class="form-row" >
        <div formArrayName="recipeIngredients">
          <ng-container *ngFor="let irecipe of recipeForm.controls.recipeIngredients.controls; let i=index">
            <div [formGroupName]="i">
              <div class="form-group col-md-4">
                <mat-form-field >
                  <mat-label>Select Ingredient</mat-label>
                  <mat-select formControlName="ingredientID" id="ingredientID" [(ngModel)]="ingredientRecipe.IngredientID">
                    <mat-option  *ngFor="let ing of ingredients | async" [value]="ing.Name" value="ing.Name">{{ing.Name}}</mat-option>              
                  </mat-select>
                </mat-form-field>
              </div>
              <div class="form-group col-md-4">
                <label for="inputEmail4">Quantity</label>
                <input  formControlName="quantity" type="number" [(ngModel)]="ingredientRecipe.Quantity" name="quantity" class="form-control" id="inputEmail4" placeholder="Quantity">
            </div> 
              <div class="form-group col-md-4">
                <mat-form-field>
                <mat-label>Select Unity</mat-label>
                  <mat-select formControlName="quantity_unit" >
                    <mat-option>Kilos</mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <button mat-raised-button color="primary" (click)="removeFormControl(i)">Remove Ingredient</button>
            </div>
          </ng-container>
        </div>
      </div>