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?

Answer 1

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! :)

Answer 2

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

Answer 3

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([]));

Answer 4

我遇到了类似的问题，在更新表单后我会收到上述错误，经过大量调查和失败的实验，我发现this.myForm.updateValueAndValidity终于成功了。