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

投稿日：2019年11月10日

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

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

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

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

constructor( private fb: FormBuilder ){}

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

setValue()で設定する

以下の記述でいけます。

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

簡単ですね。

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

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

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

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

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

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

執筆者：koyamak