Angular Forms - No Data From Html Retrived

Hi there i have a problem with angular forms, i add simple list of forms to my html

<div class="tasks-section">
<h2>Zadania</h2>
<button type="button" class="addButton" (click)="addTask()">Dodaj</button>
<div *ngFor="let task of tasks.controls; let i = index">
<div [formGroupName]="i" class="task-item">
<div>
<label for="taskName{{ i }}">Nazwa:</label>
<input id="taskName{{ i }}" formControlName="name" type="text" required />
</div>

<div>
<label for="taskCode{{ i }}">Typ:</label>
<ng-multiselect-dropdown formControlName="taskCode" id="taskCode{{ i }}"
[placeholder]="'Wybierz Typ'"
[data]="taskCodes"
[settings]="dropdownSettingsTaskCodes"
></ng-multiselect-dropdown>
</div>

<div>
<label for="taskDescription{{ i }}">Opis:</label>
<input id="taskDescription{{ i }}" formControlName="description" type="text" required />
</div>

<div>
<label for="taskBanner{{ i }}">Kupon propnowany (Opcjonalne):</label>
<ng-multiselect-dropdown formControlName="proposedBannerId" id="taskBanner{{ i }}"
[placeholder]="'Wybierz Kupon'"
[data]="banners"
[settings]="dropdownSettingsBanners"
></ng-multiselect-dropdown>
</div>
</div>
<button type="button" (click)="removeTask(i)">Usuń</button>
</div>
</div>


i add this like this

get tasks(): FormArray {
return this.actionForm.get('tasks') as FormArray;
}

addTask(): void {
const taskGroup = this.fb.group({
name: ['', Validators.required],
taskCode: [null, Validators.required],
description: ['', Validators.required],
proposedBannerId: [[]]
});
this.tasks.push(taskGroup);
}

removeTask(index: number): void {
this.tasks.removeAt(index);
}


In ngOnInit i create main form

this.actionForm = this.fb.group({
storeId: [null, Validators.required],
name: ['', Validators.required],
salary: [null, [Validators.required, Validators.min(0)]],
tasks: this.fb.array([])
});


Problem is with data retrived from form, in actionForm data is correct, but in tasks all fields are null

Continue reading...