web-dev-qa-db-fra.com

Angular2 patchValue Insère une valeur dans un tableau

Est-ce que cela ressemble à Angular2's FormGroup.patchValue () ne pousse pas de nouveaux éléments dans un tableau. 

Par exemple, quelque chose comme ceci:

ngOnInit() {

    this.form = this.formBuilder.group({
        animal: [''],
        school: this.formBuilder.group({
            name: [''],
        }),
        students: this.formBuilder.array([this.formBuilder.control('Bob')])
    });

    setTimeout(() => this.form.patchValue({
      animal: 'cat'
      school : {name: 'Fraser'},
      students: ['Bob gets edited', 'This will not show']
    }), 250);

}

Sera uniquement mise à jour le premier élément de "étudiants" mais il ne s'agira pas du {insérer} deuxième élément.

Que devrais-je faire pour que les deux éléments soient affichés?

Plunker ici .

angulartypescriptangular2-forms
16
Chi Chan

.patchValue() met uniquement à jour la FormArray existante, elle ne modifiera pas la structure de votre modèle de formulaire.

patchValue (valeur: any [], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}): void Corrige la valeur du FormArray. Il accepte un tableau qui correspond à la structure du contrôle et will faites de son mieux pour faire correspondre les valeurs aux bons contrôles du groupe.

Il accepte les super-ensembles et les sous-ensembles du tableau sans lancer une erreur.

Vous devez en fait Push ajouter un nouvel élément au tableau pour qu'il apparaisse.

 this.form.controls['students'].Push(new FormControl('This will not show'));

Tout cela est dans la documentation FormArrayhttps://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html

8
silentsod

Eh bien, comme le dit Silentsod, ce n’est pas possible. Actuellement, j'utilise ci-dessous comme alternative: 

        let controlArray = <FormArray>this.form.controls['apps'];           
        this.list.forEach(app => {
                    const fb = this.buildGroup();
                    fb.patchValue(app);
                    controlArray.Push(fb);
            });

Équipe angulaire - Nous avons besoin d’une nouvelle fonction, semblable à PatchArray (), qui corrigerait à partir d’un graphe de collection/objet. C'est un cas d'utilisation basique. 

15
Manish Jain

Eh bien, la solution que j'ai trouvée est la suivante:

this.myForm.controls['array'] = this.formBuilder.array(newArray.map(i => this.formBuilder.group(i)));
4
Giovane

J'espère que cela t'aidera. J'ai un objet complexe où mon objet a un objet à l'intérieur et un objet à l'intérieur. désolé pour ma grammaire. mais j'espère que mon code vous aidera

ngOnInit() {
    this.descriptifForm = this._fb.group({
      name: 'ad',
      descriptifs: this._fb.array([ this.buildForm() ]),
    });

    this._service.getData().subscribe(res => {
      this.descriptifForm.setControl('descriptifs', this._fb.array(res || []));
    });

  }
buildA(): FormGroup {
    return this._fb.group({
      Id: '',
      Groups: this._fb.array([ this.buildB() ]),
      Title: ''
    });
  }

  buildB(): FormGroup {
    return this._fb.group({
      Id: '',
      Fields: this._fb.array([ this.bbuildC() ]),
      Type: ''
    });
  }

  buildC(): FormGroup {
    return this._fb.group({
      Answers: this._fb.array([ this.buildD() ]),
      Code: '',
    });
  }

  buildD(): FormGroup {
    return this._fb.group({
      Data: ''
    });
  }
0
bl2b