How do I clear the FormArray in Angular Reactive Forms

Question

I am doing resetting of form. It resets the whole form but except FormArray.

Creating the form and declaring formArray within it

createForm(){
    this.invoiceForm = this.formBuilder.group({
      'name': ['', Validators.required],
      'gst': [''],
      'currency': [''],
      'addressLine1': ['', Validators.required],
      'addressLine2': [''],
      'city': ['', Validators.required],
      'state': ['', Validators.required],
      'country': ['', Validators.required],
      'postalCode': ['', Validators.required],
      'email': ['', [Validators.required, Validators.email]],
      'invoiceparticulars': this.formBuilder.array([]),
      'isGstshidden' : true
    });

  }

Trying to modify details of the form from the incoming data by resetting the data even though I called reset() function formArray retaining previous entries in it.

 modifyInvoice(index){

   this.invoiceForm.reset();

   let modifyData = this.modifyInvoiceArray[index];
   console.log(modifyData);

   this.invoiceNumber = modifyData.invoiceNumber;
   this.invoiceForm.patchValue({name: modifyData.address.Name});
   this.invoiceForm.patchValue({email: modifyData.email});
   this.invoiceForm.patchValue({gst: modifyData.GSTnumber});
   this.invoiceForm.patchValue({addressLine1: modifyData.address.AddressLine1});
   this.invoiceForm.patchValue({addressLine2: modifyData.address.AddressLine2});
   this.invoiceForm.patchValue({city: modifyData.address.City});
   this.invoiceForm.patchValue({country: modifyData.address.Country});
   this.invoiceForm.patchValue({postalCode: modifyData.address.PostalCode});
   this.invoiceForm.patchValue({state: modifyData.address.State});
   console.log(modifyData['particulars']);
}

Can you show your code?

Joseph
– Joseph

2018-05-06 05:27:05 +00:00
Commented May 6, 2018 at 5:27 — Joseph
– Joseph, Commented May 6, 2018 at 5:27

MajiD · Accepted Answer · 2020-05-10 07:24:44Z

29

Angular 8

simply use clear() method on formArrays :

(this.invoiceForm.controls['invoiceparticulars']).clear();

OR :

let frmArray = this.invoiceForm.get('invoiceparticulars') as FormArray;
frmArray.clear();

edited May 10, 2020 at 7:24

answered Jul 31, 2019 at 21:17

MajiD

2,6151 gold badge26 silver badges35 bronze badges

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

Comments

Joseph · Accepted Answer · 2018-05-07 02:44:16Z

6

Try to add this code

const control = <FormArray>this.invoiceForm.controls['invoiceparticulars'];
        for(let i = control.length-1; i >= 0; i--) {
            control.removeAt(i)
    }

answered May 7, 2018 at 2:44

Joseph

7,87533 gold badges107 silver badges234 bronze badges

5 Comments

Dhaanappagouda Patil Over a year ago

rather than this I can even directly call this.createForm(); which resets the form right?!

Joseph Over a year ago

@DhaanappagoudaPatil. I'm sorry i cant understand what youre saying. But is my solution working?

Mozgor Over a year ago

This looks unreadable. Why not a simple while (arr.length > 0) { arr.removeAt(0) } ?

abubakkar tahir Over a year ago

thank,s that exactly what i am looking for thank,s once again

Santosh Over a year ago

Instead of array.clear this is more productive. As I want the length atleast to be 1. So I start the loop with Index 1 and use removeAt method to clear except item in index 0

Collectives™ on Stack Overflow

How do I clear the FormArray in Angular Reactive Forms

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related