Remove all items from a FormArray in Angular

Question

I have a form array inside a FormBuilder and I am dynamically changing forms, i.e. on click load data from application 1 etc.

The issue I am having is that all the data loads in but the data in the FormArray stays and just concats the old items with new.

How do I clear that FormArray to only have the new items.

I've tried this

const control2 = <FormArray>this.registerForm.controls['other_Partners']; control2.setValue([]); 

but it doesn't work.

Any ideas?

ngOnInit(): void {   this.route.params.subscribe(params => {     if (params['id']) {       this.id = Number.parseInt(params['id']);     } else { this.id = null;}   });   if (this.id != null && this.id != NaN) {     alert(this.id);     this.editApplication();     this.getApplication(this.id);   } else {     this.newApplication();   } }  onSelect(Editedapplication: Application) {   this.router.navigate(['/apply', Editedapplication.id]); }  editApplication() {   this.registerForm = this.formBuilder.group({     id: null,     type_of_proposal: ['', Validators.required],     title: ['', [Validators.required, Validators.minLength(5)]],     lead_teaching_fellow: ['', [Validators.required, Validators.minLength(5)]],     description: ['', [Validators.required, Validators.minLength(5)]],     status: '',     userID: JSON.parse(localStorage.getItem('currentUser')).username,     contactEmail: JSON.parse(localStorage.getItem('currentUser')).email,     forename: JSON.parse(localStorage.getItem('currentUser')).firstname,     surname: JSON.parse(localStorage.getItem('currentUser')).surname,     line_manager_discussion: true,     document_url: '',     keywords: ['', [Validators.required, Validators.minLength(5)]],     financial_Details: this.formBuilder.group({       id: null,       buying_expertise_description: ['', [Validators.required, Validators.minLength(2)]],       buying_expertise_cost: ['', [Validators.required]],       buying_out_teaching_fellow_cost: ['', [Validators.required]],       buying_out_teaching_fellow_desc: ['', [Validators.required, Validators.minLength(2)]],       travel_desc: ['', [Validators.required, Validators.minLength(2)]],       travel_cost: ['', [Validators.required]],       conference_details_desc: ['', [Validators.required, Validators.minLength(2)]],       conference_details_cost: ['', [Validators.required]],     }),      partners: this.formBuilder.array([         //this.initEditPartner(),         //this.initEditPartner()         // this.initMultiplePartners(1)       ]     ),     other_Partners: this.formBuilder.array([       //this.initEditOther_Partners(),     ])   }); }  getApplication(id) {   this.applicationService.getAppById(id, JSON.parse(localStorage.getItem('currentUser')).username)     .subscribe(Response => {       if (Response.json() == false) {         this.router.navigateByUrl('/');       } else {         this.application = Response.json();         for (var i = 0; i < this.application.partners.length;i++) {           this.addPartner();         }         for (var i = 0; i < this.application.other_Partners.length; i++) {           this.addOther_Partner();         }          this.getDisabledStatus(Response.json().status);         (<FormGroup>this.registerForm) .setValue(Response.json(), { onlySelf: true });       }     }); } 

ngOnInit is not being called on click

Answer 1

I had same problem. There are two ways to solve this issue.

Preserve subscription

You can manually clear each FormArray element by calling the removeAt(i) function in a loop.

clearFormArray = (formArray: FormArray) => {   while (formArray.length !== 0) {     formArray.removeAt(0)   } } 

The advantage to this approach is that any subscriptions on your formArray, such as that registered with formArray.valueChanges, will not be lost.

See the FormArray documentation for more information.

---

Cleaner method (but breaks subscription references)

You can replace whole FormArray with a new one.

clearFormArray = (formArray: FormArray) => {   formArray = this.formBuilder.array([]); } 

This approach causes an issue if you're subscribed to the formArray.valueChanges observable! If you replace the FromArray with a new array, you will lose the reference to the observable that you're subscribed to.

Answer 2

Or you can simply clear the controls

this.myForm= {      name: new FormControl(""),      desc: new FormControl(""),      arr: new FormArray([]) } 

Add something array

const arr = <FormArray>this.myForm.controls.arr; arr.push(new FormControl("X")); 

Clear the array

const arr = <FormArray>this.myForm.controls.arr; arr.controls = []; 

When you have multiple choices selected and clear, sometimes it doesn't update the view. A workaround is to add

arr.removeAt(0) 

UPDATE

A more elegant solution to use form arrays is using a getter at the top of your class and then you can access it.

get inFormArray(): FormArray {     this.myForm.get('inFormArray') as FormArray; } 

And to use it in a template

<div *ngFor="let c of inFormArray; let i = index;" [formGroup]="i"> other tags... </div> 

Reset:

inFormArray.reset(); 

Push:

inFormArray.push(new FormGroup({})); 

Remove value at index: 1

inFormArray.removeAt(1); 

UPDATE 2:

Get partial object, get all errors as JSON and many other features, use the NaoFormsModule