access an array in a nested reactive form group, linting error

Question

I am trying to create a method to delete rows from my dynamic form and I am having trouble targeting the array.

so the form group is this:

this.piForm = this.fb.group({
    milestoneSaveModel: this.fb.group({
        milestonesToCreate: this.fb.array([this.mileStoneCreate()]),
    }),
});

and then my delete method is this so far:

deleteRow(index: number) {
    const control = <FormArray>this.piForm.controls['milestoneSaveModel'].controls['milestonesToCreate'];
    control.removeAt(index);
}

my linter tells me Property 'controls' does not exist on type 'AbstractControl'.

however when I trigger this in the browser it actually works. So how do i fix the linting error?

Try with this.piForm.get('milestoneSaveModel').get('milestonesToCreate') and tell me how it goes. — user4676340
– user4676340, Commented Mar 22, 2018 at 13:56
I made an answer, feel free to mark your issue as resolved once you can — user4676340
– user4676340, Commented Mar 22, 2018 at 14:06

user4676340 · Accepted Answer · 2018-03-22 13:58:28Z

2

use this syntax instead :

this.piForm.get('milestoneSaveModel').get('milestonesToCreate')

answered Mar 22, 2018 at 13:58

user4676340

Sign up to request clarification or add additional context in comments.

Comments

Vayrex · Accepted Answer · 2018-03-22 14:02:26Z

0

You need to convert type of control to FormArray.

form.get('milestoneSaveModel').get('milestonesToCreate') as FormArray;

answered Mar 22, 2018 at 14:02

Vayrex

1,4771 gold badge11 silver badges13 bronze badges

Collectives™ on Stack Overflow

access an array in a nested reactive form group, linting error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related