技術

[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

[JavaScript]IEのif文の判定がchromeと違う?

こんにちは、コーテッグのこやまです。 今持っている案件で、IE対応を進めているの …

[Rails]「どのブラウザからのアクセスか」を判別する方法

こんにちは。たなかです。 前回以下のような記事を書きました。   [R …

[Ionic] ionic serveでの動作確認でファイルの変更が反映されない!

こんにちは。たなかです。 参画しているプロジェクトで散々苦しめられているIoni …

[ Rails ]ActiveRecord::RecordInvalidで怒られ、saveができない!

こんにちは。たなかです。 新しいプロジェクトの参画が決まって、今はrailsを書 …

[Angular6] 一つのタグに複数の条件分岐を書く

こんにちは どうしても一つのタグに複数の条件分岐を書きたい時があるかと思います。 …