Angular FormArray - Property controls does not exist on type AbstractControl

Question

I want to build Form Array in Angular7

controls get underlined in red. And I have this error before I even serve the app:

Property 'controls' does not exist on type 'AbstractControl'

components

addSubmenugroup(j) {
    console.log(j);
    const control = <FormArray>this.form.get('submenus').controls[j].get('submenugroups');
   // console.log(control);
    control.push(this.initSubmenugroup());  
  }


  removeSubmenugroup(j){
     const control = <FormArray>this.form.get('submenus').controls[j].get('submenugroups');
     control.removeAt(j);
  }

When I click on submit button, it should generate form array.

Answer 1

The get method of FormGroup returns a value of AbstractControl that's why the static type checker gives you an error. AbstractControl itself doesn't have a controls property.

https://angular.io/api/forms/FormControl more info here.

What you can do is

const formArray = this.form.get('submenus') as FormArray;
const secondArray = formArray.get('submenugroups`) as FormArray;
const control = secondArray.controls[...] as FormControl;

// Continue with your logic.

Answer 2

Also, you can use safe navigation operator ?, in the html file.

Change:

yourForm.get('myField').controls

to:

myForm.get('myField')?.controls