set value in form array in angular 8

Question

i have a edit form in angular 8 and use the form array in that .

i need when i enter that page it fill the form array with value but when i enter the page it not fill the form .

whats the problem ???

      ngOnInit(): void {
    this.courseExam = this.activeRoute.snapshot.data['exams']['exams']['records'];
    this.questions = this.activeRoute.snapshot.data['question']['question']["result"];
    this.questionsOld = this.activeRoute.snapshot.data['question']['question']["result"];
    console.log(this.questions)
    this.createForm();
  }

  createForm(): void {
    this.editQuestionFG = new FormGroup({
      title: new FormControl(this.questions.title, Validators.required),
      courseExamId: new FormControl(this.questions.courseExamId, Validators.required),
      courseOptions: this._formBuilder.array([])
    });
    this.setValue(this.questions.courseOptions);
  }


  createItem(): FormGroup {
    return this._formBuilder.group({
      optionTitle: new FormControl('', Validators.required),
      isCorrect: new FormControl(false, Validators.required)
    });
  }

  setValue(item: Options[]) {
    for (let x of item) {
      this.editQuestionFG.controls['courseOptions'].setValue({
        isCorrect: x.isCorrect,
        optionTitle: x.optionTitle
      })

    }
  }

html :

<div class="answer col-lg-12 kt-margin-bottom-20-mobile">
                    <div formArrayName="courseOptions" class="row m-auto"
                        *ngFor="let project of editQuestionFG.get('courseOptions').controls; let i = index">
                        <ng-container [formGroupName]="i">
                            <div class="col-lg-1 kt-margin-bottom-20-mobile icon remove text-center">
                                <label (click)="deleteItem(i)"><i class="la la-trash"></i></label>
                            </div>
                            <div class="col-lg-8 kt-margin-bottom-20-mobile">
                                <mat-form-field class="mat-form-field-fluid" appearance="outline">
                                    <mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label>
                                    <input matInput formControlName="optionTitle"
                                        [placeholder]="'GENERAL.TITLE' | translate">
                                </mat-form-field>
                            </div>
                            <div class="col-lg-3 kt-margin-bottom-20-mobile icon">
                                <mat-radio-group name="radp" aria-label="Select an option"
                                    formControlName="isCorrect">
                                    <mat-radio-button value='true'>صحیح</mat-radio-button>
                                </mat-radio-group>
                            </div>
                        </ng-container>

                    </div>
                    <div class="add-Item">
                        <button (click)="AddItems()" mat-raised-button type="button"
                            color="accent">{{'COURSE_QUESTION.ADD_NEW_OPTION' |translate}}</button>
                    </div>
                </div>

whats the problem ? how can i solve this problem ????

Answer 1

Try like this:

 setValue(item: Options[]) {
    const formArray = new FormArray([]);
    for (let x of item) {
      formArray.push(this._formBuilder.group({
        isCorrect: x.isCorrect,
        optionTitle: x.optionTitle
      }));
    }
    this.editQuestionFG.setControl('courseOptions', formArray);
  }