web-dev-qa-db-fra.com

Angular 4: tableau vide setValue formBuilder

J'ai une telle forme réactive:

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]
  });
}

plus tard, je peux ajouter un peu plus memes:

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

et puis, si j'obtiens des valeurs de formulaire, je reçois

this.form.controls['memes'].value - ici j'ai tableau

Mais il y a un cas, quand j'ai besoin de ce this.form.controls['memes'].value pour définir un tableau vide, comment est-il possible de le faire?

Si je le règle de cette façon:

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

J'ai eu une erreur: Must supply a value for form control at index: 0.

ce que je fais mal?

javascriptangulartypescriptangular2-formbuilder
6
brabertaser19

J'ai essayé plusieurs choses: reset(), setControl(), mais voici la seule solution qui réinitialise tout le tableau à [];.

Donc, comment cela a fonctionné, était d'itérer le tableau de formulaire et de supprimer chaque groupe de formulaire avec cet index particulier dans la boucle:

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

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

S'il y a un meilleur moyen, je suis ouvert aux suggestions! :)

6
AJT_82

Essayez this.myForm.controls['myFormArray'] = this.formBuilder.array([]); avec le service formBuilder instancié dans votre constructeur. 

6
Jacob Kochocki

FORME

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

1ère méthode 

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

2ème méthode 

this.form.setControl('blocks', this._formB.array([]));
3
Luis Ricardo Cayetano Herrera

J'avais un problème similaire. J'obtenais cette erreur après la mise à jour de mon formulaire. Après de nombreuses enquêtes et des essais infructueux, j'ai découvert que this.myForm.updateValueAndValidity avait finalement fait l'affaire.

1
Sam