Bugfix/enable save button after editing tags in create or update activity dialog (#5561)

* Enable save button after editing tags in create or update activity dialog

* Update changelog

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

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

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: [
+    {
+      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());
   }