Accessing Data of a FormArray of FormGroup

Question

so I've got this FormBuilder setup:

surveyForm: FormGroup;
ngOnInit(): void {
     this.surveyForm = this.formBuilder.group({
       'surveyTitle': new FormControl(null),
       'surveyDescription': new FormControl(null),
       'questionsDetail': this.formBuilder.array([
         this.formBuilder.group({
           'questionType': new FormControl('mcq'),
           'question': new FormControl(null),
           'choices': this.formBuilder.array([])
         })
       ])
     });
    };

and i tried to access the control of choices using this code:

 onAddChoice()
  {
    const control = new FormControl(null, Validators.required);
    this.surveyForm.controls.questionsDetail.control.push(control);
  }

and i get this error

quote Property 'control' does not exist on type 'AbstractControl'.

If someone can help me, that would be great.

Thanks in advance.

Answer 1

It should be controls not control

this.surveyForm.controls.questionsDetail.controls.push(control);

And I'd recommend you to use addControl method of formArray control, it is more verbose.

(this.surveyForm.get('questionsDetail') as FormArray).addControl(control);