forms - una - tabla p valor

Establecer manualmente el valor para el control FormBuilder

Question

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 (''departamento'') dentro del componente, y simplemente no funciona, incluso el nuevo valor se registra para consolarse 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 this.form la sesión, this.form el campo sigue en blanco! He visto a otras personas usar updateValue() pero esto es beta.1 y no lo veo como un método válido para llamar al control.

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

Simplemente 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>

Answer 1

Aangular 2 final ha actualizado las API. 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

Answer 2

En Angular 2 Final (RC5 +) hay nuevas API para actualizar los valores de los formularios. 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.

Answer 3

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

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

Answer 4

Podrías 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 obtener más detalles, puede echar un vistazo al JS Doc 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 .

Answer 5

Puede usar los siguientes métodos para actualizar el valor de un control de forma reactiva. Cualquiera de los siguientes métodos se adaptará a sus necesidades.

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 recorrerá todos los controles del formulario, por lo que no es preferible al actualizar un 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 varios controles en el grupo de formularios si es necesario utilizando el

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

Answer 6

Solución actualizada de @ Filoche Angular 2. Usando https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

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

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

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

Alternativamente, puede usar la solution @ AngularUniversity que usa patchValue

Answer 7

Actualizado: 19/03/2017

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

ANTIGUO:

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

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

No muy elegante, estoy de acuerdo. Espero que esto mejore en futuras versiones.

Answer 8

Consejo: Si está usando setValue pero no proporciona todas las propiedades en el formulario, obtendrá un error:

Must supply a value for form control with name: ''stateOrProvince''.

Por lo tanto, puede tener la tentación de usar patchValue , pero esto puede ser peligroso si está tratando de actualizar un formulario completo. Tengo una address que puede no tener stateOrProvince o stateCd dependiendo de si es de EE. UU. O de todo el mundo.

En su lugar, puede actualizar de esta manera, lo que utilizará los valores nulos como valores predeterminados:

this.form.setValue( { stateOrProvince: null, stateCd: null, ...address } );

Answer 9

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

Si no desea configurar manualmente cada campo.