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" >Save</button>
''' The problem so far is I am not able to console the form value on submit. Thank you...
CodePudding user response:
try to use (this.form.controls[i]) or this.form.get(i) instead of (this.form.get(i)).controls in function of adddTracks