Définir manuellement la valeur du contrôle FormBuilder

Cela me rend fou, je suis sous le coup et je ne peux pas me permettre de passer une autre journée entière là-dessus.

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

Voici l'instance FormBuilder:

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

C'est le gestionnaire d'événements qui reçoit le service 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.formle 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 le contrôle.

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

Je voudrais simplement utiliser ngControl="dept"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>

Mis à jour: 19/03/2017

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

VIEUX:

Pour l'instant, nous sommes obligés de faire un cast 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 versions futures.

Dans Angular 2 Final (RC5 +), de nouvelles API permettent de mettre à jour les valeurs de formulaire. La patchValue()méthode API prend en charge les mises à jour partielles de formulaire, où nous n'avons besoin de spécifier que certains des champs:

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

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

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

Vous pouvez utiliser les méthodes suivantes pour mettre à jour la valeur d'un contrôle de formulaire réactif. L'une des méthodes suivantes conviendra à vos besoins.

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 effectuera une boucle sur tous les contrôles du formulaire, elle n'est donc pas préférée 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 dans le groupe de formulaires si nécessaire à l'aide du

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

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 deuxième paramètre de la updateValueméthode: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model. ts # L269 .

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

  this.myForm.get('myVal').setValue(val);

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

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

Solution mise à jour Angular 2 de @ Filoche. En utilisantFormControl

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

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

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

Vous pouvez également utiliser la solution @ AngularUniversity qui utilisepatchValue

Je sais que la réponse est déjà donnée, mais je veux donner une brève réponse sur la façon de mettre à jour la valeur d'un formulaire afin que d'autres nouveaux arrivants puissent avoir une idée claire.

votre structure de formulaire est si parfaite pour l'utiliser comme exemple. donc, tout au long de ma réponse, je la désignerai comme la forme.

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

donc notre formulaire est un FormGroup type d'objet qui a trois FormControl .

Il existe deux façons de mettre à jour la valeur du modèle:

• Utilisez la méthode setValue () pour définir une nouvelle valeur pour un contrôle individuel. La méthode setValue () adhère strictement à la structure du groupe de formulaires et remplace la valeur entière du contrôle.

• Utilisez la méthode patchValue () pour remplacer toutes les propriétés définies dans l'objet qui ont changé dans le modèle de formulaire.

Les contrôles stricts de la méthode setValue () aident à détecter les erreurs d'imbrication dans des formulaires complexes, tandis que patchValue () échoue silencieusement sur ces erreurs.

De la documentation officielle Angular ici

Ainsi, lors de la mise à jour de la valeur d'une instance de groupe de formulaires qui contient plusieurs contrôles, mais vous souhaiterez peut-être uniquement mettre à jour des parties du modèle. patchValue () est celui que vous recherchez.

voyons l'exemple. Lorsque vous utilisez patchValue ()

this.form.patchValue({
    dept: 1 
});
//here we are just updating only dept field and it will work.

mais lorsque vous utilisez setValue (), vous devez mettre à jour le modèle complet car il adhère strictement à la structure du groupe de formulaires. alors, si nous écrivons

this.form.setValue({
    dept: 1 
});
// it will throw error.

Nous devons transmettre toutes les propriétés du modèle de groupe de formulaires. comme ça

this.form.setValue({
      name: 'Mr. Bean'
      dept: 1,
      description: 'spome description'
  });

mais je n'utilise pas ce style fréquemment. Je préfère utiliser l'approche suivante qui aide à garder mon code plus propre et plus compréhensible.

Ce que je fais, c'est que je déclare tous les contrôles comme une variable séparée et j'utilise setValue () pour mettre à jour ce contrôle spécifique.

pour le formulaire ci-dessus, je vais faire quelque chose comme ça.

get companyIdentifier(): FormControl {
    return this.form.get('name') as FormControl;
}

get dept(): FormControl {
    return this.form.get('dept') as FormControl;
}

get description(): FormControl {
    return this.form.get('description') as FormControl;
}

lorsque vous devez mettre à jour le contrôle de formulaire, utilisez simplement cette propriété pour le mettre à jour. Dans l'exemple, l'interrogateur a essayé de mettre à jour le contrôle de formulaire de service lorsque l'utilisateur sélectionnait un élément dans la liste déroulante.

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

  // instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.

  this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}

Je suggère de jeter un œil à l' API FormGroup pour connaître toutes les propriétés et méthodes de FormGroup.

Supplémentaire : pour en savoir plus sur getter voir ici

Si vous utilisez le contrôle de formulaire, le moyen le plus simple de le faire:

this.FormName.get('ControlName').setValue(value);

Conseil: si vous utilisez setValuemais ne fournissez pas toutes les propriétés du formulaire, vous obtiendrez une erreur:

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

Vous pourriez donc être tenté d'utiliser patchValue, mais cela peut être dangereux si vous essayez de mettre à jour un formulaire entier. J'ai un addressqui peut ne pas avoir stateOrProvinceou stateCdselon qu'il s'agit des États-Unis ou du monde entier.

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

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