技術

[Angular] リアクティブフォームの値をtsファイルで設定する。

投稿日:

こんにちは、コーテッグの小山です。

Angularのリアクティブフォームについて3記事目ぐらいです、
以前、リアクティブフォームの値をhtmlで紐づけて更新するやり方を記事にしました。

もちろんtsファイル側でもできるので、記事にしてみます。

前提として、以下のようにformGroupが定義してあるとします。

constructor( private fb: FormBuilder ){}

ngOnInit() {
  this.formGroup = this.fb.group({
    firstName: [''],
    lastName: [''],
  });
}

setValue()で設定する

以下の記述でいけます。

this.formGroup.controls.firstName.setValue('hoge');

簡単ですね。

valueに直接代入するのはやめよう。

formGroupのvalueプロパティで、firstNameとlastNameを取得することができます。

this.formGroup.value
=> { firstName: '', lastName: ''}

値を更新するときに以下のように書きたくなりますが、
避けた方がいいです。

// やめた方がいい記述。
this.formGroup.value.firstName = 'hoge';

setValue()を使いましょう。
いくつかオプションもありますが。大きな違いとして、setValue()で
updateValueAndValidity()が走るようになっています。

valueの値を上書いたとしても、バリデーションチェックされません。
不具合の原因となってしまう可能性があります。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは IE8・9ではdisplay: flex;が使えないがために片方を固 …

どうも中田です。 Let’s Encryptって無料だし便利ですよね …

コマンド一つで「20190729」みたいなスラッシュなしの日付を入力したい!

こんにちは。たなかです。 Macで「きょう」と入力すると、今日の日付が予測変換さ …

Google PolyをFusion360でお試し

Googleさんが公開した無料の3Dデータライブラリ Poly AR・VRアプリ …

no image

【ionic】Android build Error: Uh oh!(ええとああ!)

どうも中田です。 環境をいろいろとupdateしたら $ionic build …