FormArray length does not reset by form.reset()

Question

I am working on Angular forms data driven approach, I added form controls dynamically to FormArray, I used form.reset() to reset the added controls, but form.reset() doest not reset the FormArray length, I have found that this is a known issue and can be solved using this approach, https://github.com/angular/angular/pull/11051 , but still I am unclear about this. Please help, Thanks

reviewForm: FormGroup;
  ngOnInit(){
    this.reviewForm = new FormGroup({            
      'controlArray': new FormArray([        
    ])
    });
  }

onSubmit(){     
    this.formData = new FormData(this.formService.formName, this.reviewForm.value.controlArray);    
    let formControls = JSON.stringify(this.formData); 
    // console.log(formControls);
    this.formService.createForm(formControls)
      .subscribe(
        data => console.log(data),
        error => console.error(error)
    );
    this.reviewForm.reset();    
  }

Fiyaz Hasan · Accepted Answer · 2017-11-21T10:26:01.617

18

Calling reset on FormControl, FormGroup or FormArray will only reset the values of native html controls they are attached to. It won't delete the controls from the DOM.

Only way you can add controls to a FormArray is via your component code file (typescript) dynamically. That means you will update the DOM dynamically. Hence, calling reset on the FormArray will only clear the values of the dynamically added controls (set the controls to their initial state. Empty string for a input box for example). On the other hand, resetting the length of the FromArray requires deleting all the controls inside the FormArray.

So in this case you will have to set the FormArray control itself with an empty FormArray. Consider the following example which deletes all the controls of a FormArray by replacing it with an empty FormArray instance,

this.reviewForm.setControl('controlArray', new FormArray([]));

When using with a FormBuilder instance you can do it like the following,

this.reviewForm.setControl('controlArray', this.fb.array([])); // here, `fb` is a form builder instance

edited Nov 21 '17 at 10:26

answered Nov 21 '17 at 09:50

Fiyaz Hasan

757
5
9

`fb` is just an instance of a `FormBuilder`. you can rewrite the code like, `this.reviewForm.setControl('controlArray', new FormArray([]));`. answer is updated – Fiyaz Hasan Nov 21 '17 at 10:22
1

This break the subscriptions on that control. – Twois May 09 '18 at 16:53
then how can we reset the FormArray completely? @Twois – sainu May 16 '18 at 12:18
@sainu When we create a new FormGroup, we set the default values and in my opinion the reset function should be use them instead of clear everything and set null for everything. – Twois May 18 '18 at 09:27
As of Angular 8+ the recommended way of removing all components from a FormArray is `formArray.clear();` – Renan Mar 08 '19 at 04:06
I think building a new form is better than setting the form array value to null, since it's just break the subscription to the control. – Sanira Nimantha Jun 20 '19 at 10:02

score 2 · Answer 2 · answered Jul 09 '20 at 11:40

Another approach would be to clear the array and add add when necessary a default array element, e.g.:

// All array elements are removed
(this.reviewForm.get('controlArray') as FormArray).clear();
// Other values are removed
this.reviewForm.reset();
// When necessary add an initial array element
// (this.reviewForm.get('controlArray') as FormArray).push(new FormControl('Initial Element');

FormArray length does not reset by form.reset()

2 Answers2

Linked