web-dev-qa-db-fra.com

Les contrôles angulaires 2 désactivés ne sont pas inclus dans le formulaire.value

J'ai remarqué que si je désactive un contrôle sur une forme réactive angulaire 2, le contrôle n'est pas inclus dans la forme.valeur. Par exemple, si je définis mon formulaire comme ci-dessous:

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

et vérifiez la this.notelinkingForm.value, si tous les contrôles sont activés, la sortie serait:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

Cependant, lorsque certains contrôles sont désactivés, il s’agit:

{"Enabled":true}

Notez comment les contrôles désactivés sont exclus.

Mon intention est que lorsque le formulaire change, je souhaite pouvoir transmettre le formulaire.value avec toutes les propriétés qu'il contient à mon API restante. Cela ne sera évidemment pas possible s'il ne contient pas les éléments désactivés.

Est-ce que je manque quelque chose ici ou est-ce le comportement attendu? Y a-t-il un moyen de dire à Angular d'inclure les éléments désactivés dans la forme.valeur?

Bienvenue vos pensées.

angularangular2-forms
60
lankyplanks

Vous pouvez utiliser:

this.notelinkingForm.getRawValue()

De docs :

Si vous souhaitez inclure toutes les valeurs indépendamment de l'état désactivé, utilisez cette méthode. Sinon, la propriété value est le meilleur moyen d'obtenir la valeur du groupe.

118
Sasxa

Une autre option que j'utilise est:

this.form.controls['LinkToPreceeding'].value;

2
Luis Ricardo Cayetano Herrera

Merci @Sasxa de m'avoir apporté 80% de ce dont j'avais besoin. 

Pour ceux qui recherchent une solution au même problème mais pour les formulaires imbriqués, j'ai pu résoudre le problème en changeant mon 

this.notelinkingForm.get('nestedForm').value

à 

this.notelinkingForm.getRawValue().nestedForm
0
eper