I controlli disabilitati Angular 2 non vengono inclusi nel form.value

113

Ho notato che se disabilito un controllo su una forma reattiva Angular 2, il controllo non viene incluso nel form.value. Ad esempio, se definisco il mio modulo come di seguito:

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)
});

e controlla this.notelinkingForm.value, se tutti i controlli sono abilitati, l'output sarebbe:

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

Tuttavia, quando alcuni dei controlli sono disabilitati, sarebbe:

{"Enabled":true}

Notare come vengono esclusi i controlli disabilitati.

Il mio intento è che quando il modulo cambia, voglio essere in grado di passare il form.value con tutte le proprietà in esso alla mia API di riposo. Questo non sarà ovviamente possibile se non contiene gli articoli disabilitati.

Mi manca qualcosa qui o è questo il comportamento previsto? C'è un modo per dire ad Angular di includere gli elementi disabilitati nel form.value?

Dai il benvenuto ai tuoi pensieri.

angular angular2-forms

— Jim Culverwell
fonte

246

Puoi usare:

this.notelinkingForm.getRawValue()

Dai documenti :

Se desideri includere tutti i valori indipendentemente dallo stato disabilitato, utilizza questo metodo. In caso contrario, la valueproprietà è il modo migliore per ottenere il valore del gruppo.

— Sasxa
fonte

41

Mi chiedo perché diavolo il team Angular abbia fatto questo

— inorganik

@inorganik Lo hanno fatto perché è possibile abilitare un controllo disabilitato e modificarne il valore. In questo caso getRawValue () restituirà un oggetto con il valore manomesso.

— Danese

1

Questa è effettivamente una buona cosa. Ad esempio, so che i valori dei miei controlli disabilitati non cambieranno, quindi non voglio includerli nell'API di salvataggio perché ho assegnato a quei controlli un valore dal database in primo luogo. Ma in alcuni casi, in realtà voglio includere quei controlli che hanno i valori assegnati dal front-end e non sono memorizzati nel DB e questa funzione lo copre. È sempre positivo avere entrambe le opzioni.

— ChiragMS

Questo è vero @ChiragMS. Mi piace quell'aspetto fintanto che ho una scelta tra readonlye disabled. Ma questo non è il caso, ad esempio, delle caselle di controllo e dei pulsanti di opzione come ho descritto nella risposta di seguito. In quei casi non mi è piaciuto dover ottenere i dati in modo diverso e codificare qualcosa specificamente per quel caso.

— Sandro

10

Un'altra opzione che utilizzo è:

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

— Luis Ricardo Cayetano Herrera
fonte

7

Grazie @Sasxa per avermi fornito l' 80% di ciò di cui avevo bisogno.

Per quelli di voi che cercano una soluzione allo stesso problema ma per i moduli annidati sono riuscito a risolvere modificando il mio solito

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

per

this.notelinkingForm.getRawValue().nestedForm

— EPER
fonte

0

Se si utilizza al readonlyposto di disablednon è ancora modificabile mentre i dati saranno inclusi nel modulo. Ma questo non è possibile in tutti i casi. Ad esempio, non è disponibile per i pulsanti di opzione e le caselle di controllo. Consulta i documenti Web MDN . In questi casi è necessario richiedere le altre soluzioni fornite qui.

— Sandro
fonte