技術

[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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[Rails] バージョン上げるときに気をつけること

どうも中田です。 セキュリティ診断とかで引っかかってrailsのバージョンあげた …

no image

[リアクティブフォーム]バリデーションチェックを任意のタイミングで走らせる。

Angularのリアクティブフォームで使っていると、 バリデーションを後付けした …

[ Ionic ] アプリのビューをiPhoneXのセーフエリアに対応させる

こんにちは。たなかです。 Ionicで開発しているとき、ハマりがちなポイントの一 …

git_logo

[Git] どのコミットでバグが入ったか原因究明する方法【git blame】

こんにちは。さとうです。 今回はgitを使って、どのコミットでバグが入ったか原因 …

no image

ng-ifのelse句でコンポーネントのプロパティと名前重複

こんにちは、コーテッグのこやまです。 Angularを触っていたら、コンポーネン …