115 votes

Angular2 valeur définie pour formGroup

J'ai donc un formulaire complexe pour la création d'une entité et je veux l'utiliser pour l'édition ainsi, je suis en utilisant de nouvelles formes angulaires de l'API. J'ai structuré la forme exactement comme les données que j'ai récupérer à partir de la base de données de sorte que je veux régler la valeur de l'ensemble du formulaire pour les données récupérées ici est un exemple de ce que je veux faire:

this.form = builder.group({
      b : [ "", Validators.required ],
      c : [ "", Validators.required ],
      d : [ "" ],
      e : [ [] ],
      f : [ "" ]
    });
this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

PS: NgModel ne fonctionne pas avec les nouvelles formes de l'api aussi je n'ai pas l'esprit à l'aide d'un moyen de liaison de données dans le modèle que dans

<input formControlName="d" value="[data.d]" />

qui fonctionne, mais il serait une douleur dans le cas des tableaux

357voto

Steve Paul Points 135

Solution angulaire 2.0 finale :

Pour définir toutes les valeurs de FormGroup, utilisez setValue :

 this.myFormGroup.setValue({
  formControlName1: myValue1, 
  formControlName2: myValue2
});
 

Pour ne définir que certaines valeurs, utilisez patchValue :

 this.myFormGroup.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be omitted)
});
 

Avec cette seconde technique, toutes les valeurs ne doivent pas être fournies et les champs pour lesquels les valeurs n'ont pas été définies ne seront pas affectés.

12voto

Pour définir la valeur lorsque votre contrôle est FormGroup pouvez utiliser cet exemple

 this.clientForm.controls['location'].setValue({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude
    });
 

5voto

Oui, vous pouvez utiliser setValue pour définir la valeur à des fins d'édition / mise à jour.

 this.personalform.setValue({
      name: items.name,
      address: {
        city: items.address.city,
        country: items.address.country
      }
    });
 

Vous pouvez consulter http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/ pour comprendre comment utiliser les formulaires réactifs pour ajouter / modifier des fonctions à l'aide de setValue. Ça m'a fait gagner du temps

3voto

Amgad Serry Points 340

Comme indiqué dans les commentaires, cette fonctionnalité n'était pas prise en charge au moment où cette question a été posée. Ce problème a été résolu dans angular 2 rc5

3voto

Amgad Serry Points 340

J'ai implémenté une solution temporaire jusqu'au formulaire de support angular2 updateValue

  initFormGroup(form: FormGroup, data: any) {
        for(var key in form.controls) {
          console.log(key);
          if(form.controls[key] instanceof FormControl) {
            if(data[key]){
              let control = <FormControl>form.controls[key];
              this.initFormControl(control,data[key]);
            }
          } else if(form.controls[key] instanceof FormGroup) {
            if(data[key]){
              this.initFormGroup(<FormGroup>form.controls[key],data[key]);
            }
          } else if(form.controls[key] instanceof FormArray) {
            var control = <FormArray>form.controls[key];
            if(data[key])
            this.initFormArray(control, data[key]);
          }
        }
      }
      initFormArray(array: FormArray, data: Array<any>){
    if(data.length>0){
      var clone = array.controls[0];
      array.removeAt(0);
      for(var idx in data) {
        array.push(_.cloneDeep(clone));
        if(clone instanceof FormGroup)
          this.initFormGroup(<FormGroup>array.controls[idx], data[idx]);
        else if(clone instanceof FormControl)
          this.initFormControl(<FormControl>array.controls[idx], data[idx]);
        else if(clone instanceof FormArray)
          this.initFormArray(<FormArray>array.controls[idx], data[idx]);
      }
    }
  }


initFormControl(control: FormControl, value:any){
    control.updateValue(value);
  }
 

usage:

 this.initFormGroup(this.form, {b:"data",c:"data",d:"data",e:["data1","data2"],f:data});
 

note: la forme et les données doivent avoir la même structure et j'ai utilisé lodash pour deepcloning jQuery et les autres libs peuvent aussi le faire

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X