TypeError: this.formGroup.get(...).push 不是一个函数 Angular

问题的本质，我有一个创建食谱的表单，有一个添加成分按钮，其中应该出现一个附加成分字段，所以每次点击如下图，即我有一个编辑表单那里一切正常，但是在创建新组件的组件上，它给出了一个错误，TypeError: this.formGroup.get(...).push is not a function 我不明白发生了什么，非常感谢您的帮助。

我的组件

export class RecipeCreateComponent implements OnInit {
  formGroup: FormGroup;
  faSave = faSave;
  faDelete = faTrashAlt;
  recipe: Recipe;

  constructor(
    private recipeService: RecipeService,
    private router: Router,
    private route: ActivatedRoute) {

  }

  ngOnInit() {
    this.initForm();
  }

  onSubmit() {
    if (this.formGroup.invalid) {
      return;
    }
    const recipe: Recipe = {
      name: this.formGroup.value.name,
      description: this.formGroup.value.description,
      imagePath: this.formGroup.value.imagePath,
      timeOfCock: this.formGroup.value.timeOfCock,
      ingredients: this.formGroup.value.ingredients,
      steps: this.formGroup.value.steps,
      date: new Date()
    };

    this.recipeService.createRecipe(recipe)
      .subscribe(() => {
        this.formGroup.reset();
      });
  }

  initForm() {
    this.formGroup = new FormGroup({
      name: new FormControl(null, Validators.required),
      description: new FormControl(null, Validators.required),
      imagePath: new FormControl(null, Validators.required),
      timeOfCock: new FormControl(null, Validators.required),
      ingredients: new FormControl(new FormGroup({
        name: new FormControl(Validators.required),
        amount: new FormControl(null, Validators.required)
      })),
      steps: new FormControl(new FormGroup({
        text: new FormControl(null, Validators.required)
      }))
    });

  }

  onCancel() {
    this.router.navigate(['/recipes'], {relativeTo: this.route});
  }


  get controlsIngredients() {
    return (this.formGroup.get('ingredients') as FormArray).controls;
  }

  get controlsSteps() {
    return (this.formGroup.get('steps') as FormArray).controls;
  }

  onAddIngredient(): void {
    (this.formGroup.get('ingredients') as FormArray).push(
      new FormGroup({
        name: new FormControl(null, Validators.required),
        amount: new FormControl(null,
          [
            Validators.required,
            Validators.pattern(/^[1-9]+[0-9]*$/)
          ]
        )
      })
    );

  }

  onAddSteps() {
    (this.formGroup.get('steps') as FormArray).push(
      new FormGroup({
        text: new FormControl(null, Validators.required)
      })
    );
  }

  onDeleteIngredient(id: number) {
    (this.formGroup.get('ingredients') as FormArray).removeAt(id);
  }

  onDeleteStep(id: number) {
    (this.formGroup.get('steps') as FormArray).removeAt(id);
  }

我的模板当然不仅仅是一个有问题的地方

<div class="row">
  <div class="col-md-12 form-group" formArrayName="ingredients">
    <label class="text-uppercase">Ingredients</label>
    <div
      class="row mb-2"
      *ngFor="let ingredientCtrl of controlsIngredients; let i = index"
      [formGroupName]="i"
    >
      <!--              количество ингредиентов-->
      <div class="col-md-3">
        <input
          type="number"
          class="form-control"
          formControlName="amount"
          placeholder="Amount">
      </div>
      <!--             название ингредиентов-->
      <div class="col-md-7">
        <input
          type="text"
          class="form-control"
          formControlName="name"
          placeholder="Name">
      </div>
      <div class="col-md-2">
        <button
          class="btn btn-danger"
          (click)="onDeleteIngredient(i)">
          <fa-icon [icon]="faDelete"></fa-icon>
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <button class="btn btn-success" (click)="onAddIngredient()">Add Ingredients</button>
      </div>
    </div>
  </div>
</div>

错误