remove form control dynamically in angular 2 reactive forms

Question

Try to remove a control that I add to a form

I have tried this.*FormArray*.splice but it doesn't compile. Saying that FormArray has no method splice. Then I tried removeAt() but then when I run the code the error says, removeAt is not a method. One compile time fails, the next runtime fails.

I want to remove a control from an array of controls.

If you want to remove a specific FormGroup from your FormArray, you can do it like this (specifying the index): removeAt(<index>). If you want to remove a specific control from each FormGroup, you'll have to loop through the FormArray. — developer033
@developer033 `[FormGroup, FormGroup] - what is the removeAt being called on? — Phil
See this tutorial. It has a PLUNKER that you can see how to remove as I'm saying. — developer033
This should be written as answer: this.*FormArray*.removeAt(<index>) — trees_are_great
I am getting the ERROR 'TypeError: Cannot read property 'updateOn' of null' on form submit after dynamically removing the form control. Has anyone resolved this issue ? @Phil — Nish

Phil Phil · Accepted Answer · 2018-02-06T20:34:29

removeAt() is a method on the FormArray namespace, but not a ES5-7 method.

(<FormArray>items).removeAt(idx) forced the array to become a Typescript FormArray object which opened up the methods.

remove form control dynamically in angular 2 reactive forms

1 Answers