reactive forms with formGroup and formarray

Question

I have a simple form which is dynamically generated from a given array.

ts file ->

'''

numberofdiscs = {
    disc1: ['track1', 'track2'],
    disc2: ['track1'],
    };

arraydiscs=['disc1','disc2]

'''

I created the formgroup structure like this: -->

'''

addcontrols() {
    for (let i in this.numberofdiscs) {
      this.form.addControl(i, this.fb.array([]));
    }
  }

  addtracks() {
    for (let i in this.numberofdiscs) {
      for (let a of this.numberofdiscs[i]) {
        (<FormArray>this.form.get(i)).controls.push(this.trackInfoGroup());
      }
    }
  }

 trackInfoGroup(): FormGroup {
    return this.fb.group({
      code: this.fb.group({ isrc: [''], label: [''] }),
      artists: this.fb.group({ name: [''], namekana: [''], nameenglish: [''] }),
      titles: this.fb.group({ song: [''], songkana: [''], songenglish: [''] }),
      playtime: this.fb.group({ duration: [''], starttime: [''] }),
      options: this.fb.group({ medley: [''], tieup: [''], bonus: [''] }),
    });
  }

'''

Form is showing no errors on rendering but I am not able to get the input values html -->

'''

<ng-container *ngFor="let disc of arraydiscs; let i=index;">
    <div formArrayName="{{disc}}">
        <div *ngFor="let track of this.form.get(disc).controls; let i=index;">
            <div formGroupName="{{i}}">
                <span>Track Number : {{i}}</span>
                <span>Code :
                    <ng-container formGroupName="code">
                        <span><input type="text" formControlName="isrc"></span>
                        <span><input type="text" formControlName="label"></span>

                    </ng-container>
                </span>
                <span>Artists :
                    <ng-container formGroupName="artists">
                        <span><input type="text" formControlName="name"></span>
                        <span><input type="text" formControlName="namekana"></span>
                        <span><input type="text" formControlName="nameenglish"></span>

                    </ng-container>
                </span>
                <span>Titles :
                    <ng-container formGroupName="titles">
                        <span><input type="text" formControlName="song"></span>
                        <span><input type="text" formControlName="songkana"></span>
                        <span><input type="text" formControlName="songenglish"></span>

                    </ng-container>
                </span>
                <span>Play Time :
                    <ng-container formGroupName="playtime">
                        <span><input type="text" formControlName="duration"></span>
                        <span><input type="text" formControlName="starttime"></span>

                    </ng-container>
                </span>
                <span>Titles :
                    <ng-container formGroupName="options">
                        <span><input type="text" formControlName="medley"></span>
                        <span><input type="text" formControlName="tieup"></span>
                        <span><input type="text" formControlName="bonus"></span>

                    </ng-container>
                </span>
            </div>
        </div>
    </div>
</ng-container>
<button type="submit" class="btn btn-primary">Save</button>

''' The problem so far is I am not able to console the form value on submit. Thank you...

Answer 1

try to use (this.form.controls[i]) or this.form.get(i) instead of (this.form.get(i)).controls in function of adddTracks