I am currently working on displaying an input field for 'levels'. The ultimate goal is to have an add button that will allow users to create multiple levels. Each learningGoal should have its respective levels created before the learning goals are finalized. Here is an example of how the json should be structured:
{
"name": "name rubric",
"learningGoals": [
{
"description": "learning goal description",
"levels": [
{
"name": "level name",
"criteras": []
},
{
"name": "level name",
"criteras": []
}
]
}
]
Currently, the 'levels' section is empty.
<form [formGroup]="rubricForm">
<ng-template matStepLabel>Naam & Niveaus</ng-template>
<mat-form-field>
<input matInput placeholder="Naam" formControlName="name">
</mat-form-field>
<div formArrayName="learningGoals">
<div *ngFor="let learningGoal of learningGoals().controls; let i = index" [formGroupName]="i">
<div formArrayName="levels">
<div *ngFor="let level of levels?.controls; let j = index" [formGroupName]="j">
<mat-form-field>
<input matInput placeholder="Naam" formControlName="name">
</mat-form-field>
</div>
</div>
</div>
</div>
</form>
This is my TypeScript code:
rubricForm: FormGroup
constructor(private fb: FormBuilder) {
this.rubricForm = this.fb.group({
name: ["", Validators.required],
learningGoals: this.fb.array([
this.initLearningGoal()
])
});
}
initLevel() {
return this.fb.group({
name: "",
});
}
initLearningGoal() {
return this.fb.group({
description: "",
levels: this.fb.array([
this.initLevel()
])
});
}
rubric(): FormArray {
return this.rubricForm.get("rubric") as FormArray;
}
learningGoals(): FormArray {
return this.rubricForm.get("learningGoals") as FormArray;
}
get levels(): FormArray {
return this.learningGoals()
.get('levels') as FormArray;
}
I attempted to remove the for loops but encountered the following error:
ERROR Error: Cannot find control with path: 'learningGoals -> levels'.
Therefore, it seems I have to include the form group within the loop. Any assistance would be greatly appreciated!