32

コントロールと選択ボックスを使用して動的な angular2 フォームを作成する際に問題があります。たとえば、このplunkerです。

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

ヒーローパワーを選択でき、コントロールは同じ値になります。ただし、 を押すChange Powersと、選択した値は null になりますが、コントロール値は古い値のままです。これは重大な問題だと思います。フォームが 1 つのことを示しているときに多くのバグの原因であると思いますが、実際には別のものを送信します。コントロールのコンテンツを更新する方法はありますか? ありupdateValue()ますが、これらすべての場合に手動で値を設定する必要があります。

フォームの作成後に選択ボックスのオプションを更新すると、選択されたボックスに選択された値が表示されますが、コントロールの値は null になります。これを処理する方法についてのアイデアはありますか?

4

6 に答える 6

33

Angular 2 Final (RC5+) には、フォーム値を更新するための新しい API があります。patchValue()API メソッドは、一部のフィールドのみを指定する必要がある部分的なフォームの更新をサポートしています。

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

setValue()すべてのフォーム フィールドを持つオブジェクトを必要とする API メソッドもあります。フィールドが欠落している場合、エラーが発生します。

于 2016-08-18T17:41:26.173 に答える
25

アップデート

angular2構文の最新の更新の時点では、このようになります

this.form.controls['power'].setValue('anthing here');
于 2016-12-09T07:44:08.603 に答える
6

現在、これがあなたができる唯一のことです（質問で述べたように）

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

フォームをリセットできる未解決の問題があります https://github.com/angular/angular/issues/4933

プル リクエストもありますが、各コントロールに対して「手動で」行うこともできますが、手付かずの状態、触れた状態などの状態をリセットすることもできます... https://github.com/angular/angular/pull/6679

于 2016-02-23T13:54:58.090 に答える
1

フォームを不変の状態に保つことができます。リセットする必要がある場合は、再構築するだけです。この方法で、最新であることを確認できます。値をどこかに保存しておき、フォームをそれらの値にリセットすることもできます。アイテムを編集しているとします。リセットすると、空のフォームだけでなく、元の値に戻すことができます...

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

この種の機能を処理する基本フォームを で作成しました。@ngrx/storeここに Gist があります。別のモデルのフォームが必要な場合は、拡張BaseFormして定義controlsとsubmit()メソッドを作成するだけで、残りは継承されます...

于 2016-02-23T14:45:58.660 に答える
0

コードは次のとおりです。

(<FormControl>this.form.controls['power']).updateValue(data);
于 2016-09-12T16:14:23.220 に答える