Why is FormArrayName always undefined in my html, even when using safe-navigation operator?

I’m following the angular material example at https://angular.io/api/forms/FormArrayName

I’m console logging the packageForm formGroup after it is initialized in ngOnInit() and the translations FormArray is there. But in the html, I’m getting an undefined error. I also tried putting a safe-navigation operator on the formArray, which gets rid of the error but nothing is displayed.

Here is my code in the component.ts :

ngOnInit() {
    this.packageModel = this.activatedRoute.snapshot.data['package'];
    if (this.packageModel) {
      this.editting = true;
    } else {
      this.packageModel = new PackageModel(null, true, 1, 0, 0, []);
    }
    this._setupForm();
  }

  ngAfterViewInit() {
    console.log(this.packageForm)
  }

  private _setupForm() {
    this.packageForm = this.formBuilder.group({
      isActive: [this.packageModel.isActive, [Validators.required]],
      quantity: [this.packageModel.quantity, [Validators.required]],
      minPrice: [this.packageModel.minPrice, [Validators.required]],
      maxPrice: [this.packageModel.maxPrice, [Validators.required]],
      translations: this.formBuilder.array([
          this._createTranslationFormGroup(0),
          this._createTranslationFormGroup(1)
      ])
    });

    console.log(this.packageForm)

    this.packageForm.get('isActive').valueChanges.subscribe(value => {
      this.packageModel.isActive = value;
    });
  }

  private _createTranslationFormGroup(index: number) {
    return this.formBuilder.group({
      name: [this.packageModel.translations[index].name, [Validators.required]],
      description: [this.packageModel.translations[index].description, [Validators.required]]
    });
  }

HTML code:

<div *ngIf="packageForm" class="package-form" [formGroup]="packageForm">
    <div formArrayName="translations">
        <div class="row" *ngFor="let translation of translations.controls; index as i" [formGroupName]="i">
            <div class="col-6">
                <mat-form-field>
                    <input type="text" matInput [formControlName]="name" />
                </mat-form-field>
            </div>
        </div>
    </div>
</div>

I’m getting the following error:
ERROR TypeError: Cannot read property ‘controls’ of undefined

enter image description here

Thanks in advance for taking the time to help me!

Source: New feed
Source Url Why is FormArrayName always undefined in my html, even when using safe-navigation operator?