I have this checkbox that I load from a list with ngfor. In the function to load the checkbox is found in the ngOnInit()
<form [formGroup]="updateUserFormEducation" (ngSubmit)="updateInfoEducation(updateUserFormEducation.value)"
class="needs-validation" novalidate>
<div class="bg-white p-3 rounded border-opacity-25" formGroupName="levels">
<div class="form-check" *ngFor="let level of list_levels; let i = index">
<input class="form-check-input" type="checkbox" [formControlName]="i" [value]="i"
(click)="loadCourses($event)">
<label class="form-check-label" [for]="level.id">
{{ level.name }}
</label>
</div>
</div>
</form>
component.ts
updateUserFormEducation = new FormGroup({
id: new FormControl(),
level: new FormControl(),
course: new FormControl(),
subject: new FormControl(),
})
this.updateUserFormEducation = this.formBuilder.group({
levels: this.formBuilder.group({}),
})
checkboxLevel() {
this.list_levels = []
this.levelService.getLevel().subscribe((levels: any) => {
levels.map((level: Level) => {
if (level.condition_level === 1) {
this.list_levels.push({
id: level.id,
name: level.name
})
}
})
})
}
ngOnInit
the row.id is the id of the user.
getUserSubjectLevel returns what the user selected, then I compare the list that is loaded with that of the function
const levels = <FormGroup>this.updateUserFormEducation.get('levels');
this.userSubjectService.getUserSubjectLevel(row.id).subscribe((user_subjects_levels: any) => {
user_subjects_levels.map((user_subject_level: any) => {
this.list_levels.map((list_level: any, index: any) => {
if (list_level.id === user_subject_level.level) {
levels.addControl(index, new FormControl(true));
}else{
levels.addControl(index, new FormControl(false));
}
})
})
})
it throws me an error
but when doing it manually, it works. that’s an example
this.updateUserFormEducation = this.formBuilder.group({
levels: this.formBuilder.group({
0 : new FormControl(true),
1 : new FormControl(false),
2 : new FormControl(true),
}),
})
so I don’t know what could be the error, if you can help me thanks