Remove multiple controls from ControlArray

Question

I have a ControlArray and at some point I need to remove multiple items from it , or easier , just clear/empty the whole array.

This is the current array :

       let myControls = new ControlArray([]);
       // Add some items to this array : 

          for(let i = 0 ; i<5 ; i++){
                myControls.push({
                    firstName : new Control( '' , Validators.required ) ,
                    lastName  : new Control( '' , Validators.required ) ,
                })
           }

       // After this my controlArray has 5 controls and 
       //everything works in the view properly .

Now I have a button that has a (click) event bind to it and I want to clear ( remove all the controls ) from myControls , but I can't find the solution.

In the documentations , there is a myControl.removeAt(index) function which removes only one item , but there is not any function that removes all the items.

Also , I've tried this :

          for(let i = 0 ; i<myControls.length ; i++){
                myControls.removeAt(i);
           }

But obviously this wont work because every time you remove an item from the array , the index will change !!!

Thanks in advance.

The `ControlArray` seems to have a `public controls: AbstractControl[]` property. Looking at the code, the `ControlArray`-specific methods are using this array directly. I suppose then it is legal and endorsed to do `myControls.controls = []` or `myControls.controls.length = 0`. — Nikos Paraskevopoulos, Apr 25 '16 at 12:25

score 10 · Answer 1 · answered Jul 20 '16 at 07:21

not much related angular, but normally when you are splicing an array in a loop you want to go backward with your counter, so that the next index i-- would still refer to the original element in the array

for(var i=myControls.length;i-->0;){
    myControls.removeAt(i);
}

score 5 · Accepted Answer · answered Apr 25 '16 at 11:21

5

I haven't checked if there is a better solution but this should work as well:

while(myControl.length) {
  myControls.removeAt(0);
}

answered Apr 25 '16 at 11:21

Günter Zöchbauer

623,577
216
2,003
1,567

Looks extremely hacky though .:) , I wish Angular team would have thought about this. – Apr 25 '16 at 12:17
You can try one of those http://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript I don't actively use JS or TS myself (only Dart) – Günter Zöchbauer Apr 25 '16 at 12:18
2

actually none of them is related to this , because all of those are touching the array itself , but in here , myControl is not an array and has a special function called removeAt() . The array is living inside in controls. But again , so far your answer is the best way unless Angular team adds a removeAll() function to that element. Thanks again. – Apr 26 '16 at 03:58
You are right https://github.com/angular/angular/blob/60727c4d2ba1e4b0b9455c767d0ef152bcedc7c2/modules/angular2/src/common/forms/model.ts#L452 – Günter Zöchbauer Apr 26 '16 at 04:40
1

Most elegant and efficient way I've found, Gunter you're my saver once again :D – KCarnaille Jun 02 '17 at 10:37

Remove multiple controls from ControlArray

2 Answers2