Los controles deshabilitados de Angular 2 no se incluyen en el formulario.

113

Me he dado cuenta de que si desactivo un control en una forma reactiva de Angular 2, el control no se incluye en form.value. Por ejemplo, si defino mi formulario como se muestra a continuación:

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

y verifique this.notelinkingForm.value, si todos los controles están habilitados, la salida sería:

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

Sin embargo, cuando algunos de los controles están deshabilitados sería:

{"Enabled":true}

Observe cómo se excluyen los controles deshabilitados.

Mi intención es que cuando cambie el formulario, quiero poder pasar el form.value con todas las propiedades a mi API de descanso. Obviamente, esto no será posible si no contiene los elementos deshabilitados.

¿Me falta algo aquí o es este el comportamiento esperado? ¿Hay alguna manera de decirle a Angular que incluya los elementos deshabilitados en form.value?

Dé la bienvenida a sus pensamientos.

angular angular2-forms Jim Culverwell
fuente

Respuestas:

246

Puedes usar:

this.notelinkingForm.getRawValue()

De los documentos :

Si desea incluir todos los valores independientemente del estado deshabilitado, use este método. De lo contrario, la valuepropiedad es la mejor manera de obtener el valor del grupo.

Sasxa
fuente
41
Me pregunto por qué diablos el equipo de Angular hizo esto
inorganik
@inorganik Lo hicieron porque es posible habilitar un control deshabilitado y editar su valor. En este caso, getRawValue () devolverá un objeto con el valor alterado.
Danés
1
En realidad, esto es algo bueno. Por ejemplo, sé que los valores de mis controles deshabilitados no van a cambiar, así que no quiero incluirlos en la API de guardar porque les asigné un valor de la base de datos a esos controles en primer lugar. Pero en algunos casos, realmente quiero incluir aquellos controles que tienen los valores asignados desde el front-end y no están almacenados en la base de datos y esta función lo cubre. Siempre es bueno tener ambas opciones.
ChiragMS
Eso es cierto @ChiragMS. Me gusta ese aspecto siempre que pueda elegir entre readonlyy disabled. Pero este no es el caso de, por ejemplo, casillas de verificación y botones de opción, como describí en la respuesta a continuación. En esos casos, no me gustó tener que obtener los datos de manera diferente y codificar algo específicamente para ese caso.
Sandro
10

Otra opción que utilizo es:

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

Luis Ricardo Cayetano Herrera
fuente
7

Gracias @Sasxa por conseguirme el 80% de lo que necesitaba.

Para aquellos de ustedes que buscan una solución al mismo problema pero para formularios anidados, pude resolver cambiando mi habitual 

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

a 

this.notelinkingForm.getRawValue().nestedForm
eper
fuente
0

Si usa en readonlylugar de disabled, aún no se puede editar, mientras que los datos se incluirán en el formulario. Pero eso no es posible en todos los casos. Por ejemplo, no está disponible para botones de opción y casillas de verificación. Consulte los documentos web de MDN . En esos casos, debe solicitar las otras soluciones proporcionadas aquí.

Sandro
fuente