web-dev-qa-db-fra.com

Valeur de contrôle du formulaire de mise à jour angulaire2

J'ai un problème pour créer des formulaires dynamiques angular2 avec des contrôles et des boîtes de sélection, par exemple this plunker :

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

Vous pouvez sélectionner un pouvoir de héros et le contrôle aura la même valeur. Mais si vous appuyez sur Change Powers, La valeur sélectionnée sera null mais la valeur du contrôle sera toujours l'ancienne valeur. C’est un problème grave, je pense, car c’est une source de nombreux bugs lorsque le formulaire indique une chose, mais qu’il soumettra en réalité quelque chose de différent, y at-il un moyen de mettre à jour le contenu du contrôle? Il y a updateValue() mais vous devez définir manuellement la valeur dans tous ces cas.

Il existe également un cas similaire lorsque vous mettez à jour les options de la zone de sélection après la création du formulaire: une valeur sélectionnée apparaît dans la zone de sélection, tandis que la valeur de contrôle est nulle, des idées sur la manière de gérer cela?

angularangular2-forms
25
Silencer

Dans Angular 2 Final (RC5 +), de nouvelles API permettent de mettre à jour les valeurs de formulaire. La méthode API patchValue() prend en charge les mises à jour partielles de formulaire, pour lesquelles nous n'avons besoin de spécifier que certains champs. :

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

Il existe également la méthode API setValue() qui nécessite un objet avec tous les champs de formulaire. S'il manque un champ, nous aurons une erreur.

26
Angular University

Mise à jour

comme à la dernière mise à jour de la syntaxe angular2 sera comme ça

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

Actuellement, c’est la seule chose que vous puissiez faire (comme mentionné dans la question)

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

Il existe un problème en suspens qui permet de réinitialiser un formulaire https://github.com/angular/angular/issues/49

Il existe également une demande d'extraction, mais cela vous permet également de la "manuellement" pour chaque contrôle, mais vous permet également de réinitialiser des états tels que vierge, touché, ... https://github.com/angular/angular/ tirer/6679

6
Günter Zöchbauer

[Stable angulaire 2]

Voici un moyen sale utilisant simplement NgModel (et sans importer d'autres modules de création de formulaire ou de groupe de formulaire)

//
// 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');
        });
    }
}
5
James Salamon

Vous pouvez essayer de garder la forme immuable. Lorsque vous avez besoin de le réinitialiser, il vous suffit de le reconstruire. De cette façon, vous pouvez être sûr que c'est à jour. Vous pouvez également conserver les valeurs stockées quelque part et réinitialiser la forme à ces valeurs. Supposons que vous modifiez un élément. Lorsque vous réinitialisez, vous pouvez rétablir les valeurs d'origine et non pas simplement un formulaire vide.

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);
  }
}

J'ai créé le formulaire de base qui gère ce type de fonctionnalité avec @ngrx/store, Voici the Gist . Quand j'ai besoin d'un formulaire pour un modèle différent, je vais étendre la méthode BaseForm et simplement définir controls et submit(), le reste est hérité ...

1
Sasxa

Le code est:

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