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

113

J'ai remarqué que si je désactive un contrôle sur un formulaire réactif Angular 2, le contrôle n'est pas inclus dans le form.value. 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 le this.notelinkingForm.value, si tous les contrôles sont activés, la sortie serait:

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

Cependant, lorsque certains des contrôles sont désactivés, ce serait:

{"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 form.value avec toutes les propriétés qu'il contient à mon API de repos. 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? Existe-t-il un moyen de dire à Angular d'inclure les éléments désactivés dans le formulaire form.value?

Accueillez vos pensées.

angular angular2-forms Jim Culverwell
la source

Réponses:

246

Vous pouvez utiliser:

this.notelinkingForm.getRawValue()

À partir de la documentation :

Si vous souhaitez inclure toutes les valeurs quel que soit l'état désactivé, utilisez cette méthode. Sinon, la valuepropriété est le meilleur moyen d'obtenir la valeur du groupe.

Sasxa
la source
42
Je me demande pourquoi diable l'équipe angulaire a fait ça
inorganik
@inorganik Ils l'ont fait car il est possible d'activer un contrôle désactivé et de modifier sa valeur. Dans ce cas, getRawValue () retournera un objet avec la valeur altérée.
danois
1
C'est en fait une bonne chose. Par exemple, je sais que les valeurs de mes contrôles désactivés ne vont pas changer, donc je ne veux pas les inclure dans l'API de sauvegarde car j'ai attribué à ces contrôles une valeur de la base de données en premier lieu. Mais dans certains cas, je veux en fait inclure les contrôles qui ont les valeurs assignées à partir du frontal et qui ne sont pas stockés dans la base de données et cette fonction le couvre. C'est toujours bien d'avoir les deux options.
ChiragMS le
C'est vrai @ChiragMS. J'aime cet aspect tant que j'ai le choix entre readonlyet disabled. Mais ce n'est pas le cas, par exemple, des cases à cocher et des boutons radio comme je l'ai décrit dans la réponse ci-dessous. Dans ces cas, je n'aimais pas que je doive obtenir les données différemment et coder quelque chose spécifiquement pour ce cas.
Sandro
10

Une autre option que j'utilise est:

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

Luis Ricardo Cayetano Herrera
la source
7

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

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

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

à 

this.notelinkingForm.getRawValue().nestedForm
eper
la source
0

Si vous utilisez à la readonlyplace, disabledil n'est toujours pas modifiable alors que les données seront incluses dans le formulaire. Mais ce n'est pas possible dans tous les cas. Par exemple, il n'est pas disponible pour les boutons radio et les cases à cocher. Consultez la documentation Web MDN . Dans ces cas, vous devez demander les autres solutions proposées ici.

Sandro
la source