Angular ラジオボタンの切り替えを行なった際にローカルストレージに用意した値を保存したい

Question

前提・実現したいこと

Angulerにおいてラジオボタンを用意し、切り替えをした際に用意した値をローカルストレージに保存したいと考えています。具体的には下記のようなイメージです。

HTML

      <form [formGroup]="searchForm" novalidate>
             <h2 class="font w6 size-slg title">title</h2>
              <div class="radio-wrap">
                  <ion-radio-group [formControlName]="'selected'">
                      <ion-item class="flex-item" lines="none">
                          <ion-label>YES</ion-label>
                          <ion-radio slot="start" value="YES" [(ngModel)]="YESORNO"></ion-radio>
                      </ion-item>
                      <ion-item class="flex-item" lines="none">
                          <ion-label>NO</ion-label>
                          <ion-radio slot="start" value="NO" [(ngModel)]="YESORNO"></ion-radio>
                      </ion-item>
                  </ion-radio-group>
              </div>
             <ion-button class="button"
                      (click)="choose()">選択
             </ion-button>
      </form>

tsファイル

export class ChoosePage implements OnInit {
  builder = new FormBuilder();
  searchForm = this.builder.group({
      choose: this.builder.control('', Validators.required)
  });

  constructor(
  ) {}

  ngOnInit() {
    this.searchForm.value.choose = localStorage.getItem('selected');
  }

  setTimeZone() {
    localStorage.removeItem('timezone');
    localStorage.setItem('timezone', '**ここにview側のvalueのYESまたはNOをバインドさせてローカルストレージの登録したい**');
  }

Angulerが不得手なためご教授いただければ幸いです。

Answer 1

export class ChoosePage implements OnInit, OnDestroy {
  private _unsubscribe$ = new Subject<void>();
  builder = new FormBuilder();
  searchForm = this.builder.group({
      choose: this.builder.control('', Validators.required)
  });

  constructor(
  ) {}

  ngOnInit() {
    this.searchForm.get('choose').setValue(localStorage.getItem('selected'));
    // this.searchForm.value.choose = localStorage.getItem('selected');

    this.searchForm.get('choose').valueChanges
      .pipe(takeUntil(this._unsubscribe$))    
      .subscribe((v) => {
          this.setTimeZone(v);
      });
  }

  setTimeZone(status: 'YES' | 'NO') {
    localStorage.removeItem('timezone');
    localStorage.setItem('timezone', status);
  }

  ngOnDestroy(): void {
    this._unsubscribe$.next()
  }

FormControlでFormの制御を行う場合は、基本的にngModelは不要です。
TS側で値が変化したときのイベントをvalueChangesで購読することができます。
これはHot Observable（＝自動で完了しない）なので、ngOnDestroy時に明示的に購読を破棄する必要があります。（のでtakeUntil()を使用します）

フォームの初期値の設定は、<FormControl>.valueを直接変更するのではなく、setValue()またはpatchValue()を用いてください。（valueはgetterなので）