diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4caf3625..f9b2fa815 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added `settings` to the `Access` model
+### Changed
+
+- Extended the tags selector component to support form control
+
+### Fixed
+
+- Fixed an issue where the save button was not enabled after editing tags in the create or update activity dialog
+
## 2.201.0 - 2025-09-24
### Added
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts
index fde4f20fa..33698acfb 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts
@@ -573,10 +573,6 @@ export class GfCreateOrUpdateActivityDialog implements OnDestroy {
}
}
- public onTagsChanged(tags: Tag[]) {
- this.activityForm.get('tags').setValue(tags);
- }
-
public ngOnDestroy() {
this.unsubscribeSubject.next();
this.unsubscribeSubject.complete();
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
index d7f466743..d6c14cfdc 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
@@ -322,10 +322,9 @@
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
index 50faab651..05a4b3e7a 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
@@ -14,7 +14,13 @@ import {
signal,
ViewChild
} from '@angular/core';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+ ControlValueAccessor,
+ FormControl,
+ FormsModule,
+ NG_VALUE_ACCESSOR,
+ ReactiveFormsModule
+} from '@angular/forms';
import {
MatAutocompleteModule,
MatAutocompleteSelectedEvent
@@ -40,12 +46,21 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
MatInputModule,
ReactiveFormsModule
],
+ providers: [
+ {
+ multi: true,
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: GfTagsSelectorComponent
+ }
+ ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
selector: 'gf-tags-selector',
styleUrls: ['./tags-selector.component.scss'],
templateUrl: 'tags-selector.component.html'
})
-export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
+export class GfTagsSelectorComponent
+ implements ControlValueAccessor, OnChanges, OnDestroy, OnInit
+{
@Input() hasPermissionToCreateTag = false;
@Input() readonly = false;
@Input() tags: Tag[];
@@ -99,7 +114,10 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
return [...(tags ?? []), tag];
});
- this.tagsChanged.emit(this.tagsSelected());
+ const newTags = this.tagsSelected();
+ this.tagsChanged.emit(newTags);
+ this.onChange(newTags);
+ this.onTouched();
this.tagInput.nativeElement.value = '';
this.tagInputControl.setValue(undefined);
}
@@ -111,7 +129,31 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
});
});
- this.tagsChanged.emit(this.tagsSelected());
+ const newTags = this.tagsSelected();
+ this.tagsChanged.emit(newTags);
+ this.onChange(newTags);
+ this.onTouched();
+ this.updateFilters();
+ }
+
+ public registerOnChange(fn: (value: Tag[]) => void) {
+ this.onChange = fn;
+ }
+
+ public registerOnTouched(fn: () => void) {
+ this.onTouched = fn;
+ }
+
+ public setDisabledState(isDisabled: boolean) {
+ if (isDisabled) {
+ this.tagInputControl.disable();
+ } else {
+ this.tagInputControl.enable();
+ }
+ }
+
+ public writeValue(value: Tag[]) {
+ this.tagsSelected.set(value || []);
this.updateFilters();
}
@@ -133,6 +175,15 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
});
}
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ private onChange = (_value: Tag[]): void => {
+ // ControlValueAccessor onChange callback
+ };
+
+ private onTouched = (): void => {
+ // ControlValueAccessor onTouched callback
+ };
+
private updateFilters() {
this.filteredOptions.next(this.filterTags());
}