はじめに

Angularは下記のバージョンでお送りします。

@angular/cli: 7.3.9

なにがしたかったか

認証にAzure ADを使用している関係で、定期的に(1時間立ち上げっぱなしで1回程度)ページがリフレッシュされる
入力内容が消えちゃうのもアレなので入力状態を保存しておいて復帰させたい。
巷の入力状態復帰ライブラリはCookieやlocalstorageに保存するものがほとんど
じゃあライブラリ使わなくてもReactiveForms使ってたら余裕で実装できるかも？

というわけで実装してみよう…というあらましです。

行うこと

ReactiveFormsのvalueChangesイベントをサブスクライブします。
ReactiveFormsはデータを構造体でもっているので、そのデータをJSONにしてlocalstorageに保存します。
ComponentがInitializeされた段階でlocalstorageにデータが存在する場合はpatchValueで入力されていたデータを復帰します。

以上。

極端な話、下記ソースコードだけで実現できるということですね。

(もちろん格納データの存在チェックやらは必要なのでこれ＋もろもろは必要ですが！)

ngOnInit() {

    // 起動時にlocalstorageの値をFormsに反映
    const stVal = JSON.parse(localStorage.getItem('hogehoge'));
    this.sampleInputFormGroup.patchValue(stVal);

    this.sampleInputFormGroup.valueChanges.subscribe(value => {
        // 変更内容をlocalstorageに保存
        const valSt = JSON.stringify(value);
        localStorage.setItem('hogehoge', valSt)
    });

}