diff --git a/apps/browser/src/autofill/popup/settings/excluded-domains.component.html b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html
index e3b6bf5f802..92abef3730c 100644
--- a/apps/browser/src/autofill/popup/settings/excluded-domains.component.html
+++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html
@@ -14,46 +14,52 @@
{{ "domainsTitle" | i18n }}
- {{ excludedDomainsState?.length || 0 }}
+ {{
+ excludedDomainsState.length + domainForms.value.length
+ }}
-
-
-
+
+ {{ domain }}
+
+
+
+
-
+
+
+
+
diff --git a/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts b/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts
index 7d429bfe4f0..0447d8076c2 100644
--- a/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts
+++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts
@@ -7,7 +7,13 @@ import {
AfterViewInit,
ViewChildren,
} from "@angular/core";
-import { FormsModule } from "@angular/forms";
+import {
+ FormsModule,
+ ReactiveFormsModule,
+ FormBuilder,
+ FormGroup,
+ FormArray,
+} from "@angular/forms";
import { RouterModule } from "@angular/router";
import { Subject, takeUntil } from "rxjs";
@@ -45,6 +51,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
CommonModule,
FormFieldModule,
FormsModule,
+ ReactiveFormsModule,
IconButtonModule,
ItemModule,
JslibModule,
@@ -68,6 +75,11 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy {
isLoading = false;
excludedDomainsState: string[] = [];
storedExcludedDomains: string[] = [];
+
+ protected domainListForm = new FormGroup({
+ domains: this.formBuilder.array([]),
+ });
+
// How many fields should be non-editable before editable fields
fieldsEditThreshold: number = 0;
@@ -77,10 +89,15 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy {
private domainSettingsService: DomainSettingsService,
private i18nService: I18nService,
private toastService: ToastService,
+ private formBuilder: FormBuilder,
) {
this.accountSwitcherEnabled = enableAccountSwitching();
}
+ get domainForms() {
+ return this.domainListForm.get("domains") as FormArray;
+ }
+
async ngAfterViewInit() {
this.domainSettingsService.neverDomains$
.pipe(takeUntil(this.destroy$))
@@ -117,8 +134,7 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy {
}
async addNewDomain() {
- // add empty field to the Domains list interface
- this.excludedDomainsState.push("");
+ this.domainForms.push(this.formBuilder.control(null));
await this.fieldChange();
}
@@ -148,7 +164,11 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy {
this.isLoading = true;
const newExcludedDomainsSaveState: NeverDomains = {};
- const uniqueExcludedDomains = new Set(this.excludedDomainsState);
+
+ const uniqueExcludedDomains = new Set([
+ ...this.excludedDomainsState,
+ ...this.domainForms.value,
+ ]);
for (const uri of uniqueExcludedDomains) {
if (uri && uri !== "") {
@@ -194,13 +214,14 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy {
title: "",
variant: "success",
});
+
+ this.domainForms.clear();
} catch {
this.toastService.showToast({
message: this.i18nService.t("unexpectedError"),
title: "",
variant: "error",
});
-
// Don't reset via `handleStateUpdate` to preserve input values
this.isLoading = false;
}