Establecer manualmente el valor para el Control FormBuilder

Esto me está volviendo loco, estoy bajo el arma y no puedo permitirme pasar otro día entero en esto.

Estoy tratando de establecer manualmente un valor de control ('dept') dentro del componente, y simplemente no funciona, incluso los nuevos registros de valores para consolar 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.form el campo sigue en blanco! He visto otras ppl usan updateValue() pero esto es beta.1 y no lo veo como un método válido para llamar al control.

También he tratado de llamar updateValueAndValidity() sin éxito :(.

Simplemente usaría ngControl="dept" en el elemento form, como estoy haciendo con el resto del formulario, pero es una directiva/componente personalizada.

<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>
Author: isherwood, 2016-01-27
Source

8 answers

Actualizado: 19/03/2017

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

ANTIGUO:

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

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

No muy elegante Estoy de acuerdo. Espero que esto se mejore en futuras versiones.

 162
Author: Filoche,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-19 07:44:50

En Angular 2 Final (RC5+) hay nuevas API para actualizar los valores del formulario. El método API patchValue() admite actualizaciones parciales de formularios, donde solo necesitamos especificar algunos de los campos: 

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

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

 83
Author: Angular University,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-18 17:35:38

Aangular 2 final ha actualizado las API. Han añadido 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 hay necesidad de 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

 11
Author: tanveer ahmad dar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-06 16:24:28

Puedes probar 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 más detalles, puede echar un vistazo al documento JS correspondiente con respecto al segundo parámetro del método updateValue: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts#L269.

 8
Author: Thierry Templier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-20 20:24:12 
  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

Si no desea configurar manualmente cada campo.

 3
Author: bendyourtaxes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-23 16:33:36

@Filoche's Angular 2 solución actualizada. Usando FormControl

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

import { FormControl } from '@angular/forms';

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

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

 2
Author: zurfyx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:36

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

  this.myForm.get('myVal').setValue(val);
 1
Author: chovy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-10 01:53:14

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 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 hará un bucle completo de todos los controles en el formulario, por lo que no se prefiere al actualizar el control único

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 formulario si es necesario utilizando el

this.form.patchValue({"dept": selected.id, "description":"description value"});
 0
Author: vivekkurien,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-04 12:59:29