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.

Pengyy · Accepted Answer · 2017-09-13 09:29:16Z

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, 2017 at 9:29

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

11 Comments

Muhammad Irfan Mayo Over a year ago

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 Over a year ago

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 Over a year ago

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.

Pengyy Over a year ago

@MuhammadIrfan they are the same. If you have more problems, just create new questions. :-)

Pengyy Over a year ago

@MuhammadIrfan refer this stackblitz.com/edit/angular-removeformarray-qgnlmi?file=app/…

|

Abdul Hameed · Accepted Answer · 2017-09-13 09:29:52Z

3

use removeAt() method for removing the element from formarray

edited Sep 13, 2017 at 9:29

answered Sep 13, 2017 at 9:09

Abdul Hameed

1032 silver badges9 bronze badges

13 Comments

Muhammad Irfan Mayo Over a year ago

can you tell me the code how ? because i tried a lot on it.

Abdul Hameed Over a year ago

your_array.slice(index, 1);

Abdul Hameed Over a year ago

find the index position you need to delete in array and apply this slice code

Muhammad Irfan Mayo Over a year ago

what will be index here? my mean i have this.survey.slice(?). because i'm going to remove the whole object sections

Abdul Hameed Over a year ago

are you going to flush all the array elements (or) a particular one

|

Collectives™ on Stack Overflow

how to remove the FormArray in angular2 reactive forms

2 Answers 2

11 Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related