getting controls inside nested formArray

Question

I was how wondering how to get controls inside a nested formArray. I initialized this form

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

but when i try to access the controls of my choices formArray, I get an error. I used this code

get questionsDetailcontrols() {
    return (this.surveyForm.get('questionsDetail') as FormArray).controls;
  }
  get choicesControl()
  {
    return (this.questionsDetailcontrols.get('choices') as FormArray).controls;
  }

I get an error at get('choices') stating that "Property 'get' does not exist on type 'AbstractControl[]'". Can someone show me how to access a controls inside a nester array.

Thanks in Advance

Answer 1

Try this.

  get questionsDetailcontrols() {
    return this.surveyForm.get('questionsDetail') as FormArray;
  }

  getChoicesControl(index: number)
  {
        return (this.questionsDetailcontrols.at(index).get('choices') as FormArray).controls;
  }