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

我使用反应式表单方法创建了一个表单。我正在创建一个formGroup，每个按钮上都有两个FormControl。 在提交表单时，我试图获取FormGroup的值，它是一个FormArray，但是没有检索到该值

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

<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>

这里，

this.recipeForm.value['Components']

返回为空。但在尝试打印FormArray值时，该控件具有值

我希望表单返回ingredientName和IngRedientMount，以便将值传递给服务方法。但我没有从表格中得到价值

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);
  }