How to build a dynamic object in Angular - arrays

Question

Hello I have the following problem, I want to form the following payload structure that is in the example of the first code paragraph, I was advancing well until I came across the part of the form that is dynamic and no matter how hard I try it has not worked out, I would appreciate it really much your help.
The problem is that I cannot build the structure as the first paragraph of code, especially in the dataCollege field, since it does not save the array dynamically.
I tried to put the FormControl in the html where I render the dynamic inputs but it gives me an error
This is the structure of the payload that I was able to assemble the first 3, but the last one is where I have a problem, which is the field datosCole, which is dynamic, depending on the GradosCole field, which can be initial, has 2 values, primary has 3 values and secondary has 4 values
{ name: Sara,
age: 14,
gradeCollege: Secondary,
dataCollege: {
course: "Maths",
schedule: "Afternoon",
section: "A",
teacher: "Mateo",
}
}
This is my HTML sheet of how I build my form.
<div>
<form [formGroup]="form">
<!-- Name -->
<mat-form-field>
<input matInput type="text" placeholder="Name" [formControl]="name">
</mat-form-field>
<!-- Age -->
<mat-form-field>
<input matInput type="text" placeholder="Age" [formControl]="age">
</mat-form-field>
<!-- Grade -->
<mat-form-field>
<mat-label>Grade</mat-label>
<mat-select [formControl]="gradeCollege">
<mat-option *ngFor="let item of grades" [value]="item" (click)="getData(item)">
{{item}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- dynamic data -->
<div *ngFor="let item of data; index as i" >
<mat-form-field>
<input matInput [type]="item.type" [placeholder]="item.label" [formControl]="dataCollege" >
</mat-form-field>
</div>
</form>
<div>
<button type="button" (click)="save()">Save</button>
</div>
</div>
This is my TS file
import { Component, OnInit } from '#angular/core'; import { FormGroup, FormBuilder, Validators, AbstractControl } from '#angular/forms';
#Component({ selector: 'app-datos', templateUrl: './datos.component.html', styleUrls: ['./datos.component.scss'] }) export class DatosComponent implements OnInit {
public grades: any[] = ['initial','primary','secondary'];
public data: any[] = []
// Form
public form: FormGroup;
public name: AbstractControl;
public age: AbstractControl;
public gradeCollege: AbstractControl;
public dataCollege: AbstractControl;
constructor( protected fb: FormBuilder, ) {
}
ngOnInit() {
this.form = this.fb.group({
name: ['', Validators.compose([Validators.required])],
age: [''],
gradeCollege: ['', Validators.compose([Validators.required])],
dataCollege: ['']
});
this.name= this.form.get('name');
this.age = this.form.get('age');
this.gradeCollege = this.form.get('gradeCollege');
this.dataCollege = this.form.get('dataCollege'); }
getData (typeGrade: any) {
console.log(typeGrade);
if(typeGrade === 'initial'){
this.data = null
this.data = [
{type: 'text', label: 'course'},
{type: 'text', label: 'schedule'},
]
}
if(typeGrade === 'primary'){
this.data = null
this.data = [
{type: 'text', label: 'course'},
{type: 'text', label: 'schedule'},
{type: 'text', label: 'section'}
]
}
if(typeGrade === 'secondary'){
this.data= null
this.data = [
{type: 'text', label: 'course'},
{type: 'text', label: 'schedule'},
{type: 'text', label: 'section'},
{type: 'text', label: 'teacher'}
]
}
}
submit() {
const payload = {
name: this.name.value,
age: this.age.value,
gradeCollege: this.gradeCollege.value,
dataCollege: this.dataCollege.value,
};
console.log(payload)
}}
this is the error
ERROR TypeError: ctx.save is not a function
at ActionDialogComponent_Template_button_click_13_listener (template.html:34:36)
at executeListenerWithErrorHandling (core.js:21860:1)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:21902:1)
at HTMLButtonElement. (platform-browser.js:976:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
at Object.onInvokeTask (core.js:41686:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
at Zone.runTask (zone-evergreen.js:167:1)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480:1)
at invokeTask (zone-evergreen.js:1621:1)
defaultErrorLogger # core.js:6241
handleError # core.js:6294
handleError # core.js:13881
executeListenerWithErrorHandling # core.js:21863
wrapListenerIn_markDirtyAndPreventDefault # core.js:21902
(anonymous) # platform-browser.js:976
invokeTask # zone-evergreen.js:399
onInvokeTask # core.js:41686
invokeTask # zone-evergreen.js:398
runTask # zone-evergreen.js:167
invokeTask # zone-evergreen.js:480
invokeTask # zone-evergreen.js:1621
globalZoneAwareCallback # zone-evergreen.js:1647

Answer 1

I imagine that you want that the "dataCollege" is an Array, not an object.
Some like, e.g.
{ name: Sara,
age: 14,
gradeCollege: Secondary,
dataCollege:[{
course: "Maths",
schedule: "Afternoon",
section: "A",
teacher: "Mateo",
}
]
}
or if you has two elements
{ name: Sara,
age: 14,
gradeCollege: Secondary,
dataCollege:[{
course: "Maths",
schedule: "Afternoon",
section: "A",
teacher: "Mateo",
},
{
course: "Language",
schedule: "Afternoon",
section: "C",
teacher: "Alex",
}
]
}
Well you has an array of objects, so you should use an FormArray of FormGroups
A FormArray of FormGroup as mannage always in the same way
1.-Declare in a .ts a getter of your formArray
get dataCollege()
{
return this.form.get('dataCollege') as FormArray
}
2.- in .html
<form [formGroup]="form">
...inputs thats belog to the main form in the way,e.g...
..see that you use formControlName="control-name"
..the control-name between quotes but the "formControlName" as is..
<input formControlName="name">
....
..a div with formArrayName..
<div formArrayName="dataCollege">
..a ngFor to iterate over the formArray.controls..
..you use the "getter" defined in the fisrt step..
..you add [formGroupName]="i"..
<div *ngFor="let group of dataCollege.controls;let i=index"
[formGroupName]="i"
..like in the main group you use formControlName for the...
..controls of the FormArray...,e.g.
<input formControlName="course">
</div>
</div>
And forget all your getters to get the control