how to remove the FormArray in angular2 reactive forms

Question

I'm having issue on removing the FormArray from ReactiveForm.

I have the following code :

ngOnInit() {
  this.survey = new FormGroup({
    surveyName: new FormControl(''),
    sections: new FormArray([
      this.initSection(), 
    ]), 
  });      
}

initSection(){
  return new FormGroup({
    sectionTitle : new FormControl(''),
    sectionDescription : new FormControl(''),
  });
}

addSection(){
  const control = <FormArray>this.survey.controls['sections'];
  control.push(this.initSection());
}

Now for deletion the formControl surveyName I just do

this.survey.removeControl('surveyName');

And above code is working fine for surveyName. But what thing i can use for deletion the form array sections. I want to delete the whole section object with key.

score 6 · Accepted Answer · answered Sep 13 '17 at 09:29

6

You should always use removeControl to remove both formControl and entire formArray from reactiveform.

Things you have to pay attention is that you should use ngIf to control not showing the removed element after it's removed from reactiveform.

see sample demo.

answered Sep 13 '17 at 09:29

Pengyy

37,383
15
83
73

Thank you for answer bro. your answer is good. i have passed 2 day on this issue. but i did not solved it. i was doing same but i was not using the nfIf to control showing. – Muhammad Irfan Mayo Sep 13 '17 at 09:37
i did it already but i have one more question if i have on level same inside it. then how we will do it? – Muhammad Irfan Mayo Sep 13 '17 at 09:41
mean inside the every section i can add multiple questions and in every question i can add multiple options. now i want to delete the options:[{},{}] array. – Muhammad Irfan Mayo Sep 13 '17 at 09:51
@MuhammadIrfan they are the same. If you have more problems, just create new questions. :-) – Pengyy Sep 13 '17 at 10:06
ok sorry you were saying about tick mark i forget it. any how thanks i have updated your code there for my main issue. first click add section then delete the section question array is my main goal now. https://stackblitz.com/edit/angular-removeformarray-i7ez7f?file=app%2Fapp.component.ts – Muhammad Irfan Mayo Sep 13 '17 at 10:32
@MuhammadIrfan check again demo I provided. Hope it helps. :-) – Pengyy Sep 13 '17 at 10:44
no bro it's not like that i have send you my demo url https://stackblitz.com/edit/angular-removeformarray-i7ez7f?file=app%2Fapp.component.ts here i want to delete the whole question array like we have done before but this time on section question – Muhammad Irfan Mayo Sep 13 '17 at 10:50
im doing this this.survey.controls.sections.controls[0].removeControl('questions'); but it's not working – Muhammad Irfan Mayo Sep 13 '17 at 11:01
1

@MuhammadIrfan refer this https://stackblitz.com/edit/angular-removeformarray-qgnlmi?file=app/app.component.html – Pengyy Sep 13 '17 at 11:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154344/discussion-between-muhammad-irfan-and-pengyy). – Muhammad Irfan Mayo Sep 13 '17 at 13:05
bro i want to add option control on click now again it's formarray can you tell me how i add it again after removing & can you give me your email? thanks – Muhammad Irfan Mayo Sep 25 '17 at 10:59

Abdul Hameed · Answer 2 · 2017-09-13T09:29:52.460

3

use removeAt() method for removing the element from formarray

edited Sep 13 '17 at 09:29

answered Sep 13 '17 at 09:09

Abdul Hameed

103
2
9

can you tell me the code how ? because i tried a lot on it. – Muhammad Irfan Mayo Sep 13 '17 at 09:09
your_array.slice(index, 1); – Abdul Hameed Sep 13 '17 at 09:11
find the index position you need to delete in array and apply this slice code – Abdul Hameed Sep 13 '17 at 09:11
what will be index here? my mean i have this.survey.slice(?). because i'm going to remove the whole object sections – Muhammad Irfan Mayo Sep 13 '17 at 09:12
are you going to flush all the array elements (or) a particular one – Abdul Hameed Sep 13 '17 at 09:13
giving this issue Property 'slice' does not exist on type 'FormGroup'. – Muhammad Irfan Mayo Sep 13 '17 at 09:14
i'm doing like that let control1 = this.survey; console.log(control1); control1.slice(1, 1); – Muhammad Irfan Mayo Sep 13 '17 at 09:15
i want to flush all the array element sections – Muhammad Irfan Mayo Sep 13 '17 at 09:16
just replace the current array with new one like this below var a=[]; – Abdul Hameed Sep 13 '17 at 09:17
replace the array elements to [] – Abdul Hameed Sep 13 '17 at 09:18
{ "surveyName": "", "sections": [ { "sectionTitle": "", "sectionDescription": "" } ] } i have above json now i want to delete the sections array with key sections – Muhammad Irfan Mayo Sep 13 '17 at 09:20
https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 just have a look at this link use `removeat()` method – Abdul Hameed Sep 13 '17 at 09:28
@MuhammadIrfan Use: `delete this.survey.sections` More [here](https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object) – Surender Khairwa Sep 13 '17 at 09:51

how to remove the FormArray in angular2 reactive forms

2 Answers2