feat(client): use formControlName

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],
@@ -617,10 +618,6 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onTagsChanged(tags: Tag[]) {
-    this.holdingForm.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]="holdingForm.get('tags')?.value"
+        [hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
-      [tagsAvailable]="tagsAvailable"
+        [readonly]="!data.hasPermissionToUpdateOrder"
-      (tagsChanged)="onTagsChanged($event)"
+        [tagsAvailable]="tagsAvailable"
-    />
+      />
+    </form>
 
     @if (
       data.hasPermissionToAccessAdminControl ||