技術

[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

【ionic】$ionic emulate ios で真っ白

どうも、なかたです。 「COTeggのバケツ」というブログを立ち上げました。 こ …

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

no image

BitbucketからGithubの移行で、しょうもなくハマる。

こんにちはー。コーテッグのこやまです。 コーテッグはずっとBitbucketを使 …

Chrome開発者ツールの背景を黒にする

普段コーディングしている時は、背景黒の方が目に優しい気がするのでエディターの背景 …

[Rails] TinyTds::Error (closed connection)

どうも中田です。 たぶん、この記事で救われるエンジニアの方はおそらく1人いればよ …