Task/migrate tags selector component in holding detail dialog to form control (#5850)

* Migrate tags selector component to form control

* Update changelog

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the icon of the holdings tab on the home page
 - Improved the icon of the holdings tab on the home page for the _Zen Mode_
 - Improved the icon of the holdings tab in the account detail dialog
+- Migrated the tags selector component in the holding detail dialog to form control
 - Improved the language localization for German (`de`)
 
 ## 2.212.0 - 2025-10-29

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -39,7 +39,7 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import {
@@ -94,6 +94,7 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces';
     MatFormFieldModule,
     MatTabsModule,
     NgxSkeletonLoaderModule,
+    ReactiveFormsModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -103,7 +104,6 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces';
 })
 export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   public activitiesCount: number;
-  public activityForm: FormGroup;
   public accounts: Account[];
   public assetClass: string;
   public assetSubClass: string;
@@ -124,6 +124,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   public hasPermissionToCreateOwnTag: boolean;
   public hasPermissionToReadMarketDataOfOwnAssetProfile: boolean;
   public historicalDataItems: LineChartItem[];
+  public holdingForm: FormGroup;
   public investmentInBaseCurrencyWithCurrencyEffect: number;
   public investmentInBaseCurrencyWithCurrencyEffectPrecision = 2;
   public isUUID = isUUID;
@@ -180,16 +181,16 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
-    this.activityForm = this.formBuilder.group({
-      tags: [] as string[]
-    });
-
     const filters: Filter[] = [
       { id: this.data.dataSource, type: 'DATA_SOURCE' },
       { id: this.data.symbol, type: 'SYMBOL' }
     ];
 
-    this.activityForm
+    this.holdingForm = this.formBuilder.group({
+      tags: [] as string[]
+    });
+
+    this.holdingForm
       .get('tags')
       .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((tags: Tag[]) => {
@@ -430,7 +431,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
             };
           });
 
-          this.activityForm.setValue({ tags: this.tags }, { emitEvent: false });
+          this.holdingForm.setValue({ tags: this.tags }, { emitEvent: false });
 
           this.value = value;
 
@@ -617,10 +618,6 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onTagsChanged(tags: Tag[]) {
-    this.activityForm.get('tags').setValue(tags);
-  }
-
   public onUpdateActivity(aActivity: Activity) {
     this.router.navigate(
       internalRoutes.portfolio.subRoutes.activities.routerLink,

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -411,13 +411,14 @@
       }
     </mat-tab-group>
 
-    <gf-tags-selector
+    <form [formGroup]="holdingForm">
-      [hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
+      <gf-tags-selector
-      [readonly]="!data.hasPermissionToUpdateOrder"
+        formControlName="tags"
-      [tags]="activityForm.get('tags')?.value"
+        [hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
-      [tagsAvailable]="tagsAvailable"
+        [readonly]="!data.hasPermissionToUpdateOrder"
-      (tagsChanged)="onTagsChanged($event)"
+        [tagsAvailable]="tagsAvailable"
-    />
+      />
+    </form>
 
     @if (
       data.hasPermissionToAccessAdminControl ||

libs/ui/src/lib/tags-selector/tags-selector.component.ts

@@ -5,12 +5,10 @@ import {
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
   ElementRef,
-  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
-  Output,
   signal,
   ViewChild
 } from '@angular/core';
@@ -66,8 +64,6 @@ export class GfTagsSelectorComponent
   @Input() tags: Tag[];
   @Input() tagsAvailable: Tag[];
 
-  @Output() tagsChanged = new EventEmitter<Tag[]>();
-
   @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
 
   public filteredOptions: Subject<Tag[]> = new BehaviorSubject([]);
@@ -115,7 +111,6 @@ export class GfTagsSelectorComponent
     });
 
     const newTags = this.tagsSelected();
-    this.tagsChanged.emit(newTags);
     this.onChange(newTags);
     this.onTouched();
     this.tagInput.nativeElement.value = '';
@@ -130,7 +125,6 @@ export class GfTagsSelectorComponent
     });
 
     const newTags = this.tagsSelected();
-    this.tagsChanged.emit(newTags);
     this.onChange(newTags);
     this.onTouched();
     this.updateFilters();