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
– Jette, Commented Aug 28, 2018 at 11:40

AVJT82 · Accepted Answer · 2019-08-29 10:14:05Z

21

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, 2019 at 10:14

answered May 31, 2017 at 10:12

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

3 Comments

Jassi Over a year ago

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".

sushmit sarmah Over a year ago

Thanks. This was the only solution that worked in this whole page.

Nicholas K Over a year ago

Instead of the for-loop, you can just do control.clear().

j.k · Accepted Answer · 2017-08-01 17:27:58Z

10

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

answered Aug 1, 2017 at 17:27

j.k

4631 gold badge7 silver badges16 bronze badges

2 Comments

Stefan Falk Over a year ago

And we still do it like this in Angular 7

mlakhara Over a year ago

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

Ricardo Cayetano · Accepted Answer · 2018-02-22 22:50:41Z

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, 2018 at 22:50

Ricardo Cayetano

4465 silver badges4 bronze badges

1 Comment

FilipRistic Over a year ago

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.

Arun Vinoth PrecogTechnologies · Accepted Answer · 2017-10-18 19:34:56Z

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, 2017 at 19:34

Arun Vinoth PrecogTechnologies

22.9k17 gold badges65 silver badges186 bronze badges

answered Oct 18, 2017 at 19:06

Sam

111 bronze badge

Collectives™ on Stack Overflow

Angular 4: setValue formBuilder empty array

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related