Establecer valor manualmente para el control FormBuilder
Esto me está volviendo loco, estoy bajo presión y no puedo permitirme pasar otro día entero en esto.
Estoy intentando establecer manualmente un valor de control ("departamento") dentro del componente, y simplemente no funciona, incluso el nuevo valor se registra en la consola correctamente.
Aquí está la instancia de FormBuilder:
initForm() {
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required],
});
}
Este es el controlador de eventos que recibe el departamento seleccionado:
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;
}
Ahora, cuando se envía el formulario y cierro la sesión, ¡ this.formel campo todavía está en blanco! He visto el uso de otras personas updateValue(), pero esta es beta.1 y no lo veo como un método válido para invocar el control.
También intenté llamar updateValueAndValidity()sin éxito :(.
Simplemente lo usaría ngControl="dept"en el elemento del formulario, como lo estoy haciendo con el resto del formulario, pero es una directiva/componente personalizado.
<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>
Actualizado: 19/03/2017
this.form.controls['dept'].setValue(selected.id);
VIEJO:
Por ahora nos vemos obligados a hacer un tipo de conversión:
(<Control>this.form.controls['dept']).updateValue(selected.id)
No muy elegante, estoy de acuerdo. Espero que esto mejore en futuras versiones.
En Angular 2 Final (RC5+) hay nuevas API para actualizar los valores del formulario. El patchValue()método API admite actualizaciones parciales del formulario, donde solo necesitamos especificar algunos de los campos:
this.form.patchValue({id: selected.id})
También existe el setValue()método API que necesita un objeto con todos los campos del formulario. Si falta algún campo, obtendremos un error.
Si está utilizando el control de formulario, la forma más sencilla de hacerlo:
this.FormName.get('ControlName').setValue(value);
Aangular 2 final tiene API actualizadas. Han agregado muchos métodos para esto.
Para actualizar el control de formulario desde el controlador, haga esto:
this.form.controls['dept'].setValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
No es necesario restablecer los errores.
Referencias
https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html
https://toddmotto.com/angular-2-form-controls-patch-value-set-value
Puede utilizar los siguientes métodos para actualizar el valor de un control de formulario reactivo. Cualquiera de los siguientes métodos se adaptará a sus necesidades.
Métodos que utilizan setValue()
this.form.get("dept").setValue(selected.id);
this.form.controls["dept"].setValue(selected.id);
Métodos que utilizan patchValue()
this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});
El último método recorrerá todos los controles del formulario, por lo que no se recomienda al actualizar el control único.
Puede utilizar cualquiera de los métodos dentro del controlador de eventos.
deptSelected(selected: { id: string; text: string }) {
// any of the above method can be added here
}
Puede actualizar varios controles en el grupo de formulario si es necesario utilizando el
this.form.patchValue({"dept": selected.id, "description":"description value"});
