web-dev-qa-db-ja.com

FormBuilderコントロールの手動設定値

これは私の実を動かしています、私は銃の下にいます、そしてこれにもう一日過ごす余裕はありません。

コンポーネント内で手動で制御値（ 'dept'）を設定しようとしていますが、それが機能していません - 新しい値でも正しくコンソールに記録されます。

これがFormBuilderインスタンスです。

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

これは、選択した部門を受け取るイベントハンドラです。

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

今すぐフォームが送信され、そして私がthis.formをログアウトするとき、フィールドはまだ空白です！私は他のpplがupdateValue()を使っているのを見ました、しかしこれはbeta.1であり、私はそれをコントロールを呼び出すための有効なメソッドとして見ません。

私は成功しないでupdateValueAndValidity()を呼び出そうとしました:(。

私はform要素にngControl="dept"を使うことにします。これは私がフォームの残りの部分で行っているのと同じですが、それはカスタムディレクティブ/コンポーネントです。

<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>
formscomponentsangular
121
Matthew Brown

更新：19/03/2017 

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

古い：

今のところ我々は型キャストをすることを余儀なくされています：

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

それほどエレガントではないと思います。これが将来のバージョンで改善されることを願っています。

218
Filoche

Angular 2 Final（RC5 +）には、フォームの値を更新するための新しいAPIがあります。 patchValue() APIメソッドは部分的なフォームの更新をサポートしています。ここではいくつかのフィールドを指定するだけで済みます。

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

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

88
Angular University

Aangular 2 finalがAPIを更新しました。彼らはこれに多くの方法を追加しました。

コントローラからフォームコントロールを更新するには、これを行います。

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

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

エラーをリセットする必要はありません

参考文献

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

15
tanveer ahmad dar

あなたはこれを試すことができます：

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

詳細については、updateValueメソッドの2番目のパラメータに関する対応するJS Docを参照してください。 https://github.com/angular/angular/blob/master/modules/angular 2/src/common/forms） /model.ts#L269 。

9
Thierry Templier

リアクティブフォームコントロールの値を更新するために、次の方法が使用できます。次の方法のどれでもあなたの必要性に適するでしょう。

setValue（）を使ったメソッド 

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

patchValue（）を使ったメソッド 

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

最後の方法はフォーム内のすべてのコントロールをループ処理するため、単一のコントロールを更新するときには好ましくない

イベントハンドラ内で任意のメソッドを使用できます 

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

必要に応じて、フォームグループ内の複数のコントロールを更新することができます。

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

これらのどれも私のために働きませんでした。私がしなければなりませんでした：

  this.myForm.get('myVal').setValue(val);
3
chovy
  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

手動で各フィールドを設定したくない場合。

3
bendyourtaxes

@ FilocheのAngular 2アップデートソリューション。 FormControl を使用する

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

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

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

あるいは、@ AngularUniversityの solution を使用することもできますpatchValue

2
zurfyx

ヒント： setValueを使用しているがフォームの every プロパティを指定していない場合はエラーが発生します。

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

そのためpatchValueを使いたくなるかもしれませんが、フォーム全体を更新しようとしている場合、これは危険になる可能性があります。私はaddressを持っていますが、stateOrProvinceまたはstateCdは、米国であるか世界中であるかによって異なります。

代わりに、あなたはこのように更新することができます - それはデフォルトとしてnullを使うでしょう：

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