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 4fe3c63ec..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,11 +573,6 @@ export class GfCreateOrUpdateActivityDialog implements OnDestroy {
}
}
- public onTagsChanged(tags: Tag[]) {
- this.activityForm.get('tags').setValue(tags);
- this.activityForm.get('tags').markAsDirty();
- }
-
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..158dd70fd 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: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: GfTagsSelectorComponent,
+ multi: true
+ }
+ ],
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 OnInit, OnChanges, OnDestroy, ControlValueAccessor
+{
@Input() hasPermissionToCreateTag = false;
@Input() readonly = false;
@Input() tags: Tag[];
@@ -61,6 +76,13 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
public readonly tagsSelected = signal([]);
private unsubscribeSubject = new Subject();
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ private onChange = (_value: Tag[]): void => {
+ // ControlValueAccessor onChange callback
+ };
+ private onTouched = (): void => {
+ // ControlValueAccessor onTouched callback
+ };
public constructor() {
this.tagInputControl.valueChanges
@@ -99,7 +121,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 +136,10 @@ 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();
}
@@ -120,6 +148,28 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
this.unsubscribeSubject.complete();
}
+ // ControlValueAccessor implementation
+ writeValue(value: Tag[]): void {
+ this.tagsSelected.set(value || []);
+ this.updateFilters();
+ }
+
+ registerOnChange(fn: (value: Tag[]) => void): void {
+ this.onChange = fn;
+ }
+
+ registerOnTouched(fn: () => void): void {
+ this.onTouched = fn;
+ }
+
+ setDisabledState?(isDisabled: boolean): void {
+ if (isDisabled) {
+ this.tagInputControl.disable();
+ } else {
+ this.tagInputControl.enable();
+ }
+ }
+
private filterTags(query: string = ''): Tag[] {
const tags = this.tagsSelected() ?? [];
const tagIds = tags.map(({ id }) => {