Use ReactiveForms for Additional options.

apps/browser/src/autofill/popup/settings/autofill.component.html

@@ -207,65 +207,62 @@
       </form>
     </bit-section>
     <bit-section>
-      <bit-section-header>
-        <h2 bitTypography="h6">{{ "additionalOptions" | i18n }}</h2>
-      </bit-section-header>
-      <bit-card>
-        <bit-form-control>
-          <input
-            bitCheckbox
-            id="context-menu"
-            type="checkbox"
-            (change)="updateContextMenuItem()"
-            [(ngModel)]="enableContextMenuItem"
-          />
-          <bit-label for="context-menu">{{ "enableContextMenuItem" | i18n }}</bit-label>
-        </bit-form-control>
-        <bit-form-control>
-          <input
-            bitCheckbox
-            id="totp"
-            type="checkbox"
-            (change)="updateAutoTotpCopy()"
-            [(ngModel)]="enableAutoTotpCopy"
-          />
-          <bit-label for="totp">{{ "enableAutoTotpCopy" | i18n }}</bit-label>
-        </bit-form-control>
-        <bit-form-field>
-          <bit-label for="clearClipboard">{{ "clearClipboard" | i18n }}</bit-label>
-          <select
-            aria-describedby="clearClipboardHelp"
-            bitInput
-            id="clearClipboard"
-            (change)="saveClearClipboard()"
-            [(ngModel)]="clearClipboard"
-          >
-            <option
-              *ngFor="let o of clearClipboardOptions"
-              [label]="o.name"
-              [ngValue]="o.value"
-            ></option>
-          </select>
-          <bit-hint class="tw-text-sm" id="clearClipboardHelp">
-            {{ "clearClipboardDesc" | i18n }}
-          </bit-hint>
-        </bit-form-field>
-        <bit-form-field disableMargin>
-          <bit-label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</bit-label>
-          <select
-            aria-describedby="defaultUriMatchHelp"
-            bitInput
-            id="defaultUriMatch"
-            (change)="saveDefaultUriMatch()"
-            [(ngModel)]="defaultUriMatch"
-          >
-            <option *ngFor="let o of uriMatchOptions" [label]="o.name" [ngValue]="o.value"></option>
-          </select>
-          <bit-hint class="tw-text-sm" id="defaultUriMatchHelp">
-            {{ "defaultUriMatchDetectionDesc" | i18n }}
-          </bit-hint>
-        </bit-form-field>
-      </bit-card>
+      <form [formGroup]="additionalOptionsForm">
+        <bit-section-header>
+          <h2 bitTypography="h6">{{ "additionalOptions" | i18n }}</h2>
+        </bit-section-header>
+        <bit-card>
+          <bit-form-control>
+            <input
+              formControlName="enableContextMenuItem"
+              bitCheckbox
+              id="context-menu"
+              type="checkbox"
+            />
+            <bit-label for="context-menu">{{ "enableContextMenuItem" | i18n }}</bit-label>
+          </bit-form-control>
+          <bit-form-control>
+            <input formControlName="enableAutoTotpCopy" bitCheckbox id="totp" type="checkbox" />
+            <bit-label for="totp">{{ "enableAutoTotpCopy" | i18n }}</bit-label>
+          </bit-form-control>
+          <bit-form-field>
+            <bit-label for="clearClipboard">{{ "clearClipboard" | i18n }}</bit-label>
+            <bit-select
+              formControlName="clearClipboard"
+              aria-describedby="clearClipboardHelp"
+              bitInput
+              id="clearClipboard"
+            >
+              <bit-option
+                *ngFor="let option of clearClipboardOptions"
+                [label]="option.name"
+                [value]="option.value"
+              ></bit-option>
+            </bit-select>
+            <bit-hint class="tw-text-sm" id="clearClipboardHelp">
+              {{ "clearClipboardDesc" | i18n }}
+            </bit-hint>
+          </bit-form-field>
+          <bit-form-field disableMargin>
+            <bit-label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</bit-label>
+            <bit-select
+              formControlName="defaultUriMatch"
+              aria-describedby="defaultUriMatchHelp"
+              bitInput
+              id="defaultUriMatch"
+            >
+              <bit-option
+                *ngFor="let option of uriMatchOptions"
+                [label]="option.name"
+                [value]="option.value"
+              ></bit-option>
+            </bit-select>
+            <bit-hint class="tw-text-sm" id="defaultUriMatchHelp">
+              {{ "defaultUriMatchDetectionDesc" | i18n }}
+            </bit-hint>
+          </bit-form-field>
+        </bit-card>
+      </form>
     </bit-section>
     <bit-section *ngIf="blockBrowserInjectionsByDomainEnabled">
       <bit-item>

apps/browser/src/autofill/popup/settings/autofill.component.ts

@@ -107,6 +107,13 @@ export class AutofillComponent implements OnInit {
     defaultAutofill: new FormControl(),
   });
 
+  protected additionalOptionsForm = new FormGroup({
+    enableContextMenuItem: new FormControl(),
+    enableAutoTotpCopy: new FormControl(),
+    clearClipboard: new FormControl(),
+    defaultUriMatch: new FormControl(),
+  });
+
   enableAutofillOnPageLoad: boolean = false;
   enableInlineMenu: boolean = false;
   enableInlineMenuOnIconSelect: boolean = false;
@@ -239,19 +246,63 @@ export class AutofillComponent implements OnInit {
         void this.autofillSettingsService.setAutofillOnPageLoadDefault(value);
       });
 
+    /** Additional options form */
+
     this.enableContextMenuItem = await firstValueFrom(
       this.autofillSettingsService.enableContextMenu$,
     );
 
+    this.additionalOptionsForm.controls.enableContextMenuItem.patchValue(
+      this.enableContextMenuItem,
+      { emitEvent: false },
+    );
+
     this.enableAutoTotpCopy = await firstValueFrom(this.autofillSettingsService.autoCopyTotp$);
 
+    this.additionalOptionsForm.controls.enableAutoTotpCopy.patchValue(this.enableAutoTotpCopy, {
+      emitEvent: false,
+    });
+
     this.clearClipboard = await firstValueFrom(this.autofillSettingsService.clearClipboardDelay$);
 
+    this.additionalOptionsForm.controls.clearClipboard.patchValue(this.clearClipboard, {
+      emitEvent: false,
+    });
+
     const defaultUriMatch = await firstValueFrom(
       this.domainSettingsService.defaultUriMatchStrategy$,
     );
     this.defaultUriMatch = defaultUriMatch == null ? UriMatchStrategy.Domain : defaultUriMatch;
 
+    this.additionalOptionsForm.controls.defaultUriMatch.patchValue(this.defaultUriMatch, {
+      emitEvent: false,
+    });
+
+    this.additionalOptionsForm.controls.enableContextMenuItem.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setEnableContextMenu(value);
+        this.messagingService.send("bgUpdateContextMenu");
+      });
+
+    this.additionalOptionsForm.controls.enableAutoTotpCopy.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setAutoCopyTotp(value);
+      });
+
+    this.additionalOptionsForm.controls.clearClipboard.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setClearClipboardDelay(value);
+      });
+
+    this.additionalOptionsForm.controls.defaultUriMatch.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.domainSettingsService.setDefaultUriMatchStrategy(value);
+      });
+
     const command = await this.platformUtilsService.getAutofillKeyboardShortcut();
     await this.setAutofillKeyboardHelperText(command);
 
@@ -292,10 +343,6 @@ export class AutofillComponent implements OnInit {
     }
   }
 
-  async saveDefaultUriMatch() {
-    await this.domainSettingsService.setDefaultUriMatchStrategy(this.defaultUriMatch);
-  }
-
   private async setAutofillKeyboardHelperText(command: string) {
     if (command) {
       this.autofillKeyboardHelperText = this.i18nService.t("autofillLoginShortcutText", command);
@@ -441,19 +488,6 @@ export class AutofillComponent implements OnInit {
     return await BrowserApi.permissionsGranted(["privacy"]);
   }
 
-  async updateContextMenuItem() {
-    await this.autofillSettingsService.setEnableContextMenu(this.enableContextMenuItem);
-    this.messagingService.send("bgUpdateContextMenu");
-  }
-
-  async updateAutoTotpCopy() {
-    await this.autofillSettingsService.setAutoCopyTotp(this.enableAutoTotpCopy);
-  }
-
-  async saveClearClipboard() {
-    await this.autofillSettingsService.setClearClipboardDelay(this.clearClipboard);
-  }
-
   async updateShowCardsCurrentTab() {
     await this.vaultSettingsService.setShowCardsCurrentTab(this.showCardsCurrentTab);
   }