Angular FormArray очистить данные от полей

Question

Когда я пытаюсь добавить FormGroup в мои данные FormArray, данные из предыдущего выбора очищаются Здесь я выбираю свои данные , затем я отправляю данные и это результат Я пытаясь сделать это, когда я выбираю и отправляю старые данные, чтобы остаться здесь, мой код https://gist.github.com/VenimirPetkov/1dde3f91c289d62681ae28d65aecb187

Answer 1

Вам нужно иметь еще один div с [formGroupName] = "i" ниже вашего * ngFor. Это будет работать.

<div formArrayName="courseCurriculum">
                        <div *ngFor="let curriculmControls of 
                              courseFormData.get('courseCurriculum').controls; let 
                              i=index" [formGroupName]="i">
                        <div [formGroupName]="i">
                            <div fxLayout="row" fxLayoutAlign="start start">
                                <mat-form-field appearance="outline" fxFlex>
                                    <mat-label> Lection </mat-label>
                                    <mat-select #lection name="lection" 
                                                formControlName="lection">
                                        <mat-option 
                                        type='string'
                                        *ngFor="let lection of allLections;" 
                                        [value]= "lection">
                                            {{lection.title}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>
                            </div>

                            <div fxLayout="row" fxLayoutAlign="start start">
                                <mat-form-field appearance="outline" fxFlex>
                                    <mat-label>Position</mat-label>
                                    <input type='number' 
                                    #courseCurriculumLectionPosition 
                                    name="courseCurriculumLectionPosition"  
                                    matInput 
                                    formControlName="position">
                                </mat-form-field>
                            </div>

                            <button 

    (click)="addLection(lection.value,courseCurriculumLectionPosition.value)" 
                            class=" pink" 
                            mat-flat-button 
                            color="warn"
                            *ngIf="allLections.length > 1">
                                Add
                            </button>
                        </div>
                      </div>
                    </div>