Form Array Practice

      <div>
        <h2>Menus Data Store</h2>
        <div formArrayName="menus">
          <div *ngFor="let data of menusDataArray?.controls; let i = index">
            <input type="text" [formControlName]="i">
<button (click)="removeFormArrayField('menus', i)" class="delete">Delete</button>
          </div>
          <button (click)="onAddNewFormString('menus')">Add Menus</button>
        </div>
      </div>

  // Form Array
  menusDataArray?: FormArray;

private initDataForm() {
    this.dataForm = this.fb.group({
      name: [null, Validators.required],
      menus: this.fb.array([
        this.createStringElement()
      ]),
    });

    this.menusDataArray = this.dataForm.get('menus') as FormArray;
  }

  createStringElement() {
    return this.fb.control('');
  }

  onAddNewFormString(formControl: string) {
    (this.dataForm?.get(formControl) as FormArray).push(this.createStringElement());
    console.log("this.menusDataArray --->", this.menusDataArray );

  }


  removeFormArrayField(formControl: string, index: number) {
    let formDataArray: FormArray;
    switch (formControl) {
      case 'menus': {
        formDataArray = this.menusDataArray;
        break;
      }
      default: {
        formDataArray = null;
        break;
      }
    }
    formDataArray?.removeAt(index);
  }