使用反应式表单时未为FormArray检索表单控件值

Question

我已经使用反应式表单方法创建了一个表单。我在每次单击按钮时创建一个带有2个formControls的formGroup。 在提交表单时，我试图获取作为FormArray的FormGroup的值，但未检索到该值。

我在其中遍历控件并创建所需的formControls的HTML代码

<div class="row" formArrayName="ingredients">
          <div class="col-md-12" >


            <div class="row" 
              *ngFor="let ingredientControl of 
               recipeForm.get('ingredients').controls; 
               let index = index"

              [formGroupName]="index"
              style="margin-top: 10px;"
              >
              <div class="col-sm-8">
                <input type="text"
                  class="form-control"
                  formControlName="ingredientName"
                  >
              </div>
              <div class="col-sm-3">
                <input type="number"
                class="form-control"
                formControlName="ingredientAmount"
                >
              </div>
              <div class="col-xs-2">
                <button class="btn btn-danger" type="button"
                (click)="onDeleteIngredient(index)"> X 
              </button>
              </div>
            </div>
          </div>

        </div>

我尝试获取FormControl值的

.ts文件

我使用（ngSubmit）=“ onSubmit（）”在模板中提交表单

onSubmit(){

   const newRecipe = new RecipeModel(
      this.recipeForm.value['recipeName'],
      this.recipeForm.value['imagePath'],
      this.recipeForm.value['description'],
      this.recipeForm.value['ingredients'],

    );
    this.recipeService.addNewRecipe(newRecipe);
  }

在这里this.recipeForm.value['ingredients']返回空。但是，在尝试打印FormArray值时，该控件具有值。

我希望该表单返回IngredientName和IngredientAmount，以便将值传递给服务方法。但是我没有从表单中获得价值。