Establezca el valor manualmente para el control FormBuilder

Esto me está volviendo loco, estoy bajo presión y no puedo permitirme gastar otro día entero en esto.

Estoy tratando de 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, this.form sesión. this.form El campo está todavía en blanco! He visto a otras personas usar updateValue() pero esto es beta.1 y no veo eso como un método válido para llamar al control.

También intenté llamar a updateValueAndValidity() sin éxito :(.

Solo usaría ngControl="dept" en el elemento de formulario, como hago con el rest del formulario pero es una directiva / componente personalizado.

 <ng-select [data]="dept" [multiple]="false" [items]="depts" (selected)="deptSelected($event)"  [placeholder]="'No Dept Selected'"> 

Actualizado: 19/03/2017

 this.form.controls['dept'].setValue(selected.id); 

ANTIGUO:

Por ahora nos vemos obligados a hacer un tipo de elenco:

 (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 de formulario. El método de la API patchValue() admite actualizaciones de formularios parciales, donde solo necesitamos especificar algunos de los campos:

 this.form.patchValue({id: selected.id}) 

También está el método de API setValue() que necesita un objeto con todos los campos de formulario. Si falta un campo, obtendremos un error.

Aangular 2 final tiene APIs 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

Puedes intentar esto:

 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'].updateValue(selected.id); } 

Para obtener más información, puede consultar el documento JS Doc correspondiente al segundo parámetro del método updateValue : https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model .ts # L269 .

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass); this.form.complexForm.patchValue(cloneObj); 

Si no desea configurar manualmente cada campo.

Solución actualizada de @ Filoche Angular 2. Usando FormControl

(this.form.controls['dept']).updateValue(selected.id)

 import { FormControl } from '@angular/forms'; (this.form.controls['dept']).setValue(selected.id)); 

Alternativamente, puede usar la solución de @ AngularUniversity que usa patchValue

Ninguno de estos funcionó para mí. Tenía que hacer:

  this.myForm.get('myVal').setValue(val); 

Puede usar los siguientes métodos para actualizar el valor de un control de formulario reactivo. Cualquiera de los siguientes métodos se adaptará a su necesidad.

Métodos que usan setValue ()

 this.form.get("dept").setValue(selected.id); this.form.controls["dept"].setValue(selected.id); 

Métodos que usan 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 realizará un ciclo completo de todos los controles en el formulario, de modo que no se prefiere al actualizar un solo control

Puede usar 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 múltiples controles en el grupo de formularios si es necesario utilizando el

 this.form.patchValue({"dept": selected.id, "description":"description value"});