reactivos - validar formulario angular 5

Angular2 actualizar valor de control de formulario

Question

Tengo un problema al crear formularios angulares dinámicos2 con controles y cuadros de selección, por ejemplo este plunker :

    <select class="form-control" ngControl="power">
      <option *ngFor="#p of powers" [value]="p">{{p}}</option>
    </select>

Puedes seleccionar un poder de héroe, y el control tendrá el mismo valor. Pero si presiona Change Powers , el valor seleccionado sería nulo, pero el valor de control sigue siendo el valor antiguo. Creo que este es un problema grave, ya que es una fuente de muchos errores cuando el formulario muestra una cosa, pero en realidad presentará algo diferente. ¿Hay alguna forma de actualizar el contenido del control? Existe updateValue() pero debe establecer manualmente el valor en todos esos casos.

También hay un caso similar cuando actualiza las opciones del cuadro de selección después de la creación del formulario, se mostrará un valor seleccionado en el cuadro seleccionado, mientras que el valor de control sería nulo, ¿alguna idea sobre cómo lidiar con esto?

Answer 1

Actualizar

A partir de la última actualización de sintaxis angular2 será así.

this.form.controls[''power''].setValue(''anthing here'');

Answer 2

Actualmente esto es lo único que puedes hacer (como se menciona en la pregunta)

this.form.controls[''power''].updateValue(null);

Hay un problema abierto que permite restablecer un formulario https://github.com/angular/angular/issues/4933

También hay una solicitud de extracción, pero eso también le permite hacerlo "manualmente" para cada control, pero también permite restablecer estados como prístino, tocado, ... https://github.com/angular/angular/pull/6679

Answer 3

El código es:

(<FormControl>this.form.controls[''power'']).updateValue(data);

Answer 4

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

Answer 5

Puedes tratar de mantener la forma como inmutable. Cuando necesites restablecerlo, simplemente reconstrúyelo. De esta manera podemos estar seguros de que está al día. También puede mantener los valores almacenados en algún lugar y restablecer el formulario a esos valores. Digamos que está editando un elemento, al restablecer puede volver a los valores originales, no solo a un formulario vacío ...

export class TheForm {
  public form: ControlGroup;
  public controls = (value: any = {}) => ({
    ''id'': [value.id],
    ''name'': [value.name, Validators.required]
  });

  constructor() {
    let values = some_values_from_database || {};
    this.build(values);
  }

  build(value) {
    this.form = this._builder.group(this.controls(value));
  }

  submit() {
    console.log(this.form.value);
  }
}

He creado el formulario base que maneja este tipo de funcionalidad con @ngrx/store , aquí está la esencia . Cuando necesito un formulario para un modelo diferente, extenderé BaseForm y solo BaseForm controls y el método submit() , el resto se heredará ...

Answer 6

[Angular 2 estable]

Aquí hay una manera sucia de usar NgModel (y sin importar otros módulos de formularios o grupos de formularios)

//
// set form field, "foo" value to "bar"
//

//
// view
//
<form #formRef="ngForm">
    <input name="foo" [(ngModel)]="foo"></input>
</form>

//
// controller
//
class {
    @ViewChild(''formRef'') form: NgModel;

    ngAfterViewInit() {
        setTimeout(() => {
          this.form[''controls''][''foo''].setValue(''bar'');
        });
    }
}