Angular2更新フォームコントロール値

Question

私はコントロールと選択ボックスで、動的angular2形態は、例えば を構築する問題を抱えている。このplunker：あなたはヒーローのパワーを選択することができ、かつ制御が同じ値を持つことになります

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

。しかし、 Change Powersを押すと、選択された値はnullになりますが、制御値は依然として古い値です。これは深刻な問題ですが、これはフォームに1つのことが示されているにもかかわらず、実際には別のものを提出するときにバグの原因になると思います。コントロールの内容を更新する方法はありますか？ updateValue()がありますが、これらすべての場合に手動で値を設定する必要があります。

フォームビルド後に選択ボックスオプションを更新すると、選択した値が選択ボックスに表示されますが、コントロール値はnullになりますが、これに対処する方法はありますか？ （質問で述べたように）

Answer 1

は現在、これは

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

あなたがすることができる唯一のものですフォームhttps://github.com/angular/angular/issues/4933

をリセットできるようにするオープンな問題があり、プルリクエストもありますが、これにより、各コントロールの「手動」にもできますが、初期状態、接触状態などの状態をリセットすることもできます。https://github.com/angular/angular/pull/6679

Answer 2

フォームの種類を不変に保つことができます。リセットする必要があるときは、再構築するだけです。この方法は、最新のものであることを確認することができます。値をどこかに保存しておき、フォームをそれらの値にリセットすることもできます。 は、私が@ngrx/storeでこの種の機能を扱うベースのフォームを作成しました

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

...あなたはあなたが元の値だけでなく、空のフォームに戻すことができますリセットしたときに、項目を編集していると言いますここは the Gistです。私は別のモデルのためのフォームを必要とするとき、私は BaseFormを拡張し、ちょうど controlsと submit()方法を定義し、残りの部分は継承されます...

Answer 3

角度2最終（RC5の+）でフォームの値を更新するための新しいAPIがあります。 patchValue() APIメソッドは、我々は唯一のフィールドの一部を指定する必要が部分的にフォームの更新をサポートしています。

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

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

Answer 4

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

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

Answer 5

更新

angular2構文の最新の更新のように、この

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

Answer 6

のようになります[角度2安定]

ここで汚いですNgModelを使って（他のフォームビルダーやフォームグループモジュールをインポートしないで）

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