Refactor: remove onTagsChanged method and integrate tags selector with reactive forms

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();

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -322,10 +322,9 @@
     </div>
     <div class="mb-3">
       <gf-tags-selector
+        formControlName="tags"
         [hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
-        [tags]="activityForm.get('tags')?.value"
         [tagsAvailable]="tagsAvailable"
-        (tagsChanged)="onTagsChanged($event)"
       />
     </div>
   </div>

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<Tag[]>([]);
 
   private unsubscribeSubject = new Subject<void>();
+  // 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 }) => {