Angular 4: setValue formBuilder empty array

Question

I have such reactive form:

constructor(...){
  this.form = this.formBuilder.group({
    name: ['', Validators.compose([Validators.required, Validators.maxLength(50)])],
    memes: this.formBuilder.array([
      this.initMemes('TrollFace')
    ])
  });
}

initMemes (name?) {
  return this.formBuilder.group({
    id: [''], name: [name]
  });
}

later i can add some more memes:

addMemes () {
  const control = <FormArray>this.form.controls['memes'];
  control.push(this.initMemes('anyName'));
}

and then if i get form values i get:

this.form.controls['memes'].value - here i have array

But there is a case, when i need this this.form.controls['memes'].value to set to an empty array, how is it possible to do?

If i set it this way:

this.form.controls['memes'].setValue([])

I got error: Must supply a value for form control at index: 0.

what i do wrong?

For anyone who reads this: I struggled with this error after following a tutorial about FormArray. The solution is simple, just init the FormArray with a pair of empty square brackets []: this.formBuilder.array([ ]). I don't know what the function call in there is supposed to do, I just know it gives that error. — Jette, Aug 28 '18 at 11:40

AJT82 · Accepted Answer · 2019-08-29T10:14:05.863

15

EDIT:

As of newer versions, Angular now supports clearing a FormArray with clear():

(<FormArray>this.form.get('memes')).clear();

ORIGINAL:

Tried a few things:reset(),setControl(), but the following was the only solution I found to work that actually resets the whole array to [], other options worked, but they left the formgroups in place, just emptied the values.

So how I got it to work, was to iterate the form array and delete each form group with that particular index in the loop:

const control = <FormArray>this.form.controls['memes'];

for(let i = control.length-1; i >= 0; i--) {
  control.removeAt(i)
}

If there is a better way, I'm open for suggestions! :)

edited Aug 29 '19 at 10:14

answered May 31 '17 at 10:12

AJT82

60,574
21
115
147

i think it should be control.controls.removeAt(i). Because the console.log(control) has a array with name controls otherwise you get the error "Cannot read property 'enabled' of null". – Jassi Mar 04 '18 at 06:30
Thanks. This was the only solution that worked in this whole page. – sushmit sarmah Nov 27 '18 at 06:25
Instead of the `for-loop`, you can just do `control.clear()`. – Nicholas K Jun 16 '19 at 18:20

score 8 · Answer 2 · answered Aug 01 '17 at 17:27

8

Try this.myForm.controls['myFormArray'] = this.formBuilder.array([]); with formBuilder service instantiated in your constructor.

answered Aug 01 '17 at 17:27

Jacob Kochocki

240
1
5
13

1

And we still do it like this in Angular 7 – Stefan Falk Mar 09 '19 at 10:16
1

Doing this leaves the parent form invalid if the formArray had an invalid control before clearing it like this. The best way for Ng<8 is to use removeAt in a loop. For Angular 8+, use FormArray.clear() method – mlakhara Jun 05 '19 at 17:32

score 5 · Answer 3 · answered Feb 22 '18 at 22:50

5

FORM

this.form = this._formB.group({
    blocks: this._formB.array([])
});

1st method

let fArray = <FormArray>this.form.controls['blocks'];
while (fArray.length !== 0) {
  fArray.removeAt(0)
}

2nd method

this.form.setControl('blocks', this._formB.array([]));

answered Feb 22 '18 at 22:50

Ricardo Cayetano

326
4
4

1

Please add some explanation to your answer, this helps to OP as well as to other people that might end up here while searching for similar problem. – FilipRistic Feb 22 '18 at 23:09

score 1 · Answer 4 · edited Oct 18 '17 at 19:34

1

I was having a similar issue, where I would get said error after updating my form, and after a bunch of investigation and failed experimentation I found that this.myForm.updateValueAndValidity finally did the trick.

edited Oct 18 '17 at 19:34

Arun Vinoth

20,360
14
48
135

answered Oct 18 '17 at 19:06

Sam

11
1

Angular 4: setValue formBuilder empty array

4 Answers4