web-dev-qa-db-fra.com

Définir manuellement la valeur pour le contrôle FormBuilder

Cela me rend fou, je suis sous le feu des projecteurs et je ne peux pas me permettre de passer une journée entière sur ce sujet.

J'essaie de définir manuellement une valeur de contrôle ('dept') dans le composant, mais cela ne fonctionne tout simplement pas - même la nouvelle valeur enregistre la console correctement.

Voici l'instance de FormBuilder:

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

C'est le gestionnaire d'événement qui reçoit le département sélectionné:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

Maintenant, lorsque le formulaire est soumis et que je me déconnecte this.form, le champ est toujours vide! J'ai vu d'autres utilisateurs utiliser updateValue() mais c'est beta.1 et je ne vois pas cela comme une méthode valide pour appeler sur le contrôle.

J'ai également essayé d'appeler updateValueAndValidity() sans succès :(.

Je voudrais simplement utiliser ngControl="dept" sur l'élément de formulaire, comme je le fais avec le reste du formulaire, mais c'est une directive/un composant personnalisé.

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>
formscomponentsangular
110
Matthew Brown

Mise à jour: 19/03/2017 

this.form.controls['dept'].setValue(selected.id);

VIEUX:

Pour l'instant nous sommes obligés de faire un casting de type:

(<Control>this.form.controls['dept']).updateValue(selected.id)

Pas très élégant je suis d'accord. J'espère que cela sera amélioré dans les futures versions.

191
Filoche

Dans Angular 2 Final (RC5 +), de nouvelles API permettent de mettre à jour les valeurs de formulaire. La méthode API patchValue() prend en charge les mises à jour partielles du formulaire, dans lesquelles il suffit de spécifier certains des champs:

this.form.patchValue({id: selected.id})

Il existe également la méthode API setValue() qui nécessite un objet avec tous les champs de formulaire. S'il manque un champ, nous aurons une erreur.

88
Angular University

Aangular 2 final a mis à jour les API. Ils ont ajouté de nombreuses méthodes pour cela.

Pour mettre à jour le contrôle de formulaire à partir du contrôleur, procédez comme suit:

this.form.controls['dept'].setValue(selected.id);

this.form.controls['dept'].patchValue(selected.id);

Pas besoin de réinitialiser les erreurs

Références

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

12
tanveer ahmad dar

Vous pouvez essayer ceci:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].updateValue(selected.id);
}

Pour plus de détails, vous pouvez consulter le document JS correspondant concernant le second paramètre de la méthode updateValue: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms /model.ts#L269 .

9
Thierry Templier

Aucun de ceux-ci n'a fonctionné pour moi. Je devais faire:

  this.myForm.get('myVal').setValue(val);
4
chovy
  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

Si vous ne voulez pas définir manuellement chaque champ.

3
bendyourtaxes

@ Filoche's Angular 2 solution mise à jour. Utilisation de FormControl

(<Control>this.form.controls['dept']).updateValue(selected.id)

import { FormControl } from '@angular/forms';

(<FormControl>this.form.controls['dept']).setValue(selected.id));

Sinon, vous pouvez utiliser @ AngularUniversity's solution qui utilise patchValue

2
zurfyx

Vous pouvez utiliser les méthodes suivantes pour mettre à jour la valeur d'un contrôle de formulaire réactif. N'importe laquelle des méthodes suivantes conviendra à votre besoin.

Méthodes utilisant setValue () 

this.form.get("dept").setValue(selected.id);
this.form.controls["dept"].setValue(selected.id);

Méthodes utilisant patchValue () 

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

La dernière méthode parcourt tous les contrôles du formulaire, ce qui n’est pas préférable lors de la mise à jour d’un contrôle unique. 

Vous pouvez utiliser n'importe quelle méthode à l'intérieur du gestionnaire d'événements 

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

Vous pouvez mettre à jour plusieurs contrôles du groupe de formulaires, si nécessaire, à l'aide de la commande

this.form.patchValue({"dept": selected.id, "description":"description value"});
2
vivekkurien

Astuce: Si vous utilisez setValue mais ne fournissez pas la propriété every sur le formulaire, vous obtiendrez une erreur:

Must supply a value for form control with name: 'stateOrProvince'. 

Vous pouvez donc être tenté d'utiliser patchValue, mais cela peut être dangereux si vous essayez de mettre à jour un formulaire complet. J'ai un address qui peut ne pas avoir stateOrProvince ou stateCd selon qu'il s'agisse des États-Unis ou du monde entier.

Au lieu de cela, vous pouvez mettre à jour comme ceci - qui utilisera les valeurs NULL comme valeurs par défaut:

this.form.setValue( { stateOrProvince: null, stateCd: null, ...address } );
0
Simon_Weaver