Refactor form controls to form getter (#3325)

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -265,22 +265,22 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     let symbolMapping = {};
 
     try {
-      countries = JSON.parse(this.assetProfileForm.controls['countries'].value);
+      countries = JSON.parse(this.assetProfileForm.get('countries').value);
     } catch {}
 
     try {
       scraperConfiguration = JSON.parse(
-        this.assetProfileForm.controls['scraperConfiguration'].value
+        this.assetProfileForm.get('scraperConfiguration').value
       );
     } catch {}
 
     try {
-      sectors = JSON.parse(this.assetProfileForm.controls['sectors'].value);
+      sectors = JSON.parse(this.assetProfileForm.get('sectors').value);
     } catch {}
 
     try {
       symbolMapping = JSON.parse(
-        this.assetProfileForm.controls['symbolMapping'].value
+        this.assetProfileForm.get('symbolMapping').value
       );
     } catch {}
 
@@ -289,14 +289,14 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
       scraperConfiguration,
       sectors,
       symbolMapping,
-      assetClass: this.assetProfileForm.controls['assetClass'].value,
-      assetSubClass: this.assetProfileForm.controls['assetSubClass'].value,
-      comment: this.assetProfileForm.controls['comment'].value ?? null,
+      assetClass: this.assetProfileForm.get('assetClass').value,
+      assetSubClass: this.assetProfileForm.get('assetSubClass').value,
+      comment: this.assetProfileForm.get('comment').value ?? null,
       currency: (<Currency>(
-        (<unknown>this.assetProfileForm.controls['currency'].value)
+        (<unknown>this.assetProfileForm.get('currency').value)
       ))?.value,
-      name: this.assetProfileForm.controls['name'].value,
-      url: this.assetProfileForm.controls['url'].value
+      name: this.assetProfileForm.get('name').value,
+      url: this.assetProfileForm.get('url').value
     };
 
     this.adminService
@@ -314,8 +314,8 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     this.adminService
       .testMarketData({
         dataSource: this.data.dataSource,
-        scraperConfiguration:
-          this.assetProfileForm.controls['scraperConfiguration'].value,
+        scraperConfiguration: this.assetProfileForm.get('scraperConfiguration')
+          .value,
         symbol: this.data.symbol
       })
       .pipe(
@@ -331,9 +331,8 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
             ' ' +
             price +
             ' ' +
-            (<Currency>(
-              (<unknown>this.assetProfileForm.controls['currency'].value)
-            ))?.value
+            (<Currency>(<unknown>this.assetProfileForm.get('currency').value))
+              ?.value
         );
       });
   }

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -302,7 +302,7 @@
               mat-flat-button
               type="button"
               [disabled]="
-                assetProfileForm.controls['scraperConfiguration'].value === '{}'
+                assetProfileForm.get('scraperConfiguration').value === '{}'
               "
               (click)="onTestMarketData()"
             >
@@ -338,11 +338,11 @@
       <mat-form-field appearance="outline" class="w-100 without-hint">
         <mat-label i18n>Url</mat-label>
         <input formControlName="url" matInput type="text" />
-        @if (assetProfileForm.controls['url'].value) {
+        @if (assetProfileForm.get('url').value) {
           <gf-asset-profile-icon
             class="mr-3"
             matSuffix
-            [url]="assetProfileForm.controls['url'].value"
+            [url]="assetProfileForm.get('url').value"
           />
         }
       </mat-form-field>

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts

@@ -59,14 +59,12 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
     this.mode === 'auto'
       ? this.dialogRef.close({
           dataSource:
-            this.createAssetProfileForm.controls['searchSymbol'].value
-              .dataSource,
-          symbol:
-            this.createAssetProfileForm.controls['searchSymbol'].value.symbol
+            this.createAssetProfileForm.get('searchSymbol').value.dataSource,
+          symbol: this.createAssetProfileForm.get('searchSymbol').value.symbol
         })
       : this.dialogRef.close({
           dataSource: 'MANUAL',
-          symbol: this.createAssetProfileForm.controls['addSymbol'].value
+          symbol: this.createAssetProfileForm.get('addSymbol').value
         });
   }
 

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -67,9 +67,9 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
 
   public onSubmit() {
     const access: CreateAccessDto = {
-      alias: this.accessForm.controls['alias'].value,
-      granteeUserId: this.accessForm.controls['userId'].value,
-      permissions: [this.accessForm.controls['permissions'].value]
+      alias: this.accessForm.get('alias').value,
+      granteeUserId: this.accessForm.get('userId').value,
+      permissions: [this.accessForm.get('permissions').value]
     };
 
     this.dataService

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -27,7 +27,7 @@
       </mat-form-field>
     </div>
 
-    @if (accessForm.controls['type'].value === 'PRIVATE') {
+    @if (accessForm.get('type').value === 'PRIVATE') {
       <div>
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Permission</mat-label>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts

@@ -82,7 +82,7 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
   }
 
   public autoCompleteCheck() {
-    const inputValue = this.accountForm.controls['platformId'].value;
+    const inputValue = this.accountForm.get('platformId').value;
 
     if (typeof inputValue === 'string') {
       const matchingEntry = this.platforms.find(({ name }) => {
@@ -90,7 +90,7 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
       });
 
       if (matchingEntry) {
-        this.accountForm.controls['platformId'].setValue(matchingEntry);
+        this.accountForm.get('platformId').setValue(matchingEntry);
       }
     }
   }
@@ -105,13 +105,13 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
 
   public async onSubmit() {
     const account: CreateAccountDto | UpdateAccountDto = {
-      balance: this.accountForm.controls['balance'].value,
-      comment: this.accountForm.controls['comment'].value,
-      currency: this.accountForm.controls['currency'].value?.value,
-      id: this.accountForm.controls['accountId'].value,
-      isExcluded: this.accountForm.controls['isExcluded'].value,
-      name: this.accountForm.controls['name'].value,
-      platformId: this.accountForm.controls['platformId'].value?.id ?? null
+      balance: this.accountForm.get('balance').value,
+      comment: this.accountForm.get('comment').value,
+      currency: this.accountForm.get('currency').value?.value,
+      id: this.accountForm.get('accountId').value,
+      isExcluded: this.accountForm.get('isExcluded').value,
+      name: this.accountForm.get('name').value,
+      platformId: this.accountForm.get('platformId').value?.id ?? null
     };
 
     try {

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -39,7 +39,7 @@
           (keydown.enter)="$event.stopPropagation()"
         />
         <span class="ml-2" matTextSuffix>{{
-          accountForm.controls['currency']?.value?.value
+          accountForm.get('currency')?.value?.value
         }}</span>
       </mat-form-field>
     </div>

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts

@@ -66,9 +66,9 @@ export class TransferBalanceDialog implements OnDestroy {
 
   public onSubmit() {
     const account: TransferBalanceDto = {
-      accountIdFrom: this.transferBalanceForm.controls['fromAccount'].value,
-      accountIdTo: this.transferBalanceForm.controls['toAccount'].value,
-      balance: this.transferBalanceForm.controls['balance'].value
+      accountIdFrom: this.transferBalanceForm.get('fromAccount').value,
+      accountIdTo: this.transferBalanceForm.get('toAccount').value,
+      balance: this.transferBalanceForm.get('balance').value
     };
 
     this.dialogRef.close({ account });

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

@@ -148,13 +148,14 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
       .subscribe(async () => {
         let exchangeRateOfUnitPrice = 1;
 
-        this.activityForm.controls['feeInCustomCurrency'].setErrors(null);
-        this.activityForm.controls['unitPriceInCustomCurrency'].setErrors(null);
+        this.activityForm.get('feeInCustomCurrency').setErrors(null);
+        this.activityForm.get('unitPriceInCustomCurrency').setErrors(null);
 
-        const currency = this.activityForm.controls['currency'].value;
-        const currencyOfUnitPrice =
-          this.activityForm.controls['currencyOfUnitPrice'].value;
-        const date = this.activityForm.controls['date'].value;
+        const currency = this.activityForm.get('currency').value;
+        const currencyOfUnitPrice = this.activityForm.get(
+          'currencyOfUnitPrice'
+        ).value;
+        const date = this.activityForm.get('date').value;
 
         if (
           currency &&
@@ -174,104 +175,97 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
             exchangeRateOfUnitPrice = marketPrice;
           } catch {
-            this.activityForm.controls['unitPriceInCustomCurrency'].setErrors({
+            this.activityForm.get('unitPriceInCustomCurrency').setErrors({
               invalid: true
             });
           }
         }
 
         const feeInCustomCurrency =
-          this.activityForm.controls['feeInCustomCurrency'].value *
+          this.activityForm.get('feeInCustomCurrency').value *
           exchangeRateOfUnitPrice;
 
         const unitPriceInCustomCurrency =
-          this.activityForm.controls['unitPriceInCustomCurrency'].value *
+          this.activityForm.get('unitPriceInCustomCurrency').value *
           exchangeRateOfUnitPrice;
 
-        this.activityForm.controls['fee'].setValue(feeInCustomCurrency, {
+        this.activityForm.get('fee').setValue(feeInCustomCurrency, {
           emitEvent: false
         });
 
-        this.activityForm.controls['unitPrice'].setValue(
-          unitPriceInCustomCurrency,
-          {
-            emitEvent: false
-          }
-        );
+        this.activityForm.get('unitPrice').setValue(unitPriceInCustomCurrency, {
+          emitEvent: false
+        });
 
         if (
-          this.activityForm.controls['type'].value === 'BUY' ||
-          this.activityForm.controls['type'].value === 'FEE' ||
-          this.activityForm.controls['type'].value === 'ITEM'
+          this.activityForm.get('type').value === 'BUY' ||
+          this.activityForm.get('type').value === 'FEE' ||
+          this.activityForm.get('type').value === 'ITEM'
         ) {
           this.total =
-            this.activityForm.controls['quantity'].value *
-              this.activityForm.controls['unitPrice'].value +
-              this.activityForm.controls['fee'].value ?? 0;
+            this.activityForm.get('quantity').value *
+              this.activityForm.get('unitPrice').value +
+              this.activityForm.get('fee').value ?? 0;
         } else {
           this.total =
-            this.activityForm.controls['quantity'].value *
-              this.activityForm.controls['unitPrice'].value -
-              this.activityForm.controls['fee'].value ?? 0;
+            this.activityForm.get('quantity').value *
+              this.activityForm.get('unitPrice').value -
+              this.activityForm.get('fee').value ?? 0;
         }
 
         this.changeDetectorRef.markForCheck();
       });
 
-    this.activityForm.controls['accountId'].valueChanges.subscribe(
-      (accountId) => {
-        const type = this.activityForm.controls['type'].value;
+    this.activityForm.get('accountId').valueChanges.subscribe((accountId) => {
+      const type = this.activityForm.get('type').value;
 
-        if (
-          type === 'FEE' ||
-          type === 'INTEREST' ||
-          type === 'ITEM' ||
-          type === 'LIABILITY'
-        ) {
-          const currency =
-            this.data.accounts.find(({ id }) => {
-              return id === accountId;
-            })?.currency ?? this.data.user.settings.baseCurrency;
+      if (
+        type === 'FEE' ||
+        type === 'INTEREST' ||
+        type === 'ITEM' ||
+        type === 'LIABILITY'
+      ) {
+        const currency =
+          this.data.accounts.find(({ id }) => {
+            return id === accountId;
+          })?.currency ?? this.data.user.settings.baseCurrency;
 
-          this.activityForm.controls['currency'].setValue(currency);
-          this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
-
-          if (['FEE', 'INTEREST'].includes(type)) {
-            if (this.activityForm.controls['accountId'].value) {
-              this.activityForm.controls['updateAccountBalance'].enable();
-            } else {
-              this.activityForm.controls['updateAccountBalance'].disable();
-              this.activityForm.controls['updateAccountBalance'].setValue(
-                false
-              );
-            }
+        this.activityForm.get('currency').setValue(currency);
+        this.activityForm.get('currencyOfUnitPrice').setValue(currency);
+
+        if (['FEE', 'INTEREST'].includes(type)) {
+          if (this.activityForm.get('accountId').value) {
+            this.activityForm.get('updateAccountBalance').enable();
+          } else {
+            this.activityForm.get('updateAccountBalance').disable();
+            this.activityForm.get('updateAccountBalance').setValue(false);
           }
         }
       }
-    );
+    });
 
-    this.activityForm.controls['date'].valueChanges.subscribe(() => {
-      if (isToday(this.activityForm.controls['date'].value)) {
-        this.activityForm.controls['updateAccountBalance'].enable();
+    this.activityForm.get('date').valueChanges.subscribe(() => {
+      if (isToday(this.activityForm.get('date').value)) {
+        this.activityForm.get('updateAccountBalance').enable();
       } else {
-        this.activityForm.controls['updateAccountBalance'].disable();
-        this.activityForm.controls['updateAccountBalance'].setValue(false);
+        this.activityForm.get('updateAccountBalance').disable();
+        this.activityForm.get('updateAccountBalance').setValue(false);
       }
 
       this.changeDetectorRef.markForCheck();
     });
 
-    this.activityForm.controls['searchSymbol'].valueChanges.subscribe(() => {
-      if (this.activityForm.controls['searchSymbol'].invalid) {
+    this.activityForm.get('searchSymbol').valueChanges.subscribe(() => {
+      if (this.activityForm.get('searchSymbol').invalid) {
         this.data.activity.SymbolProfile = null;
       } else if (
         ['BUY', 'DIVIDEND', 'SELL'].includes(
-          this.activityForm.controls['type'].value
+          this.activityForm.get('type').value
         )
       ) {
-        this.activityForm.controls['dataSource'].setValue(
-          this.activityForm.controls['searchSymbol'].value.dataSource
-        );
+        this.activityForm
+          .get('dataSource')
+          .setValue(this.activityForm.get('searchSymbol').value.dataSource);
 
         this.updateSymbol();
       }
@@ -282,130 +276,127 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
     this.filteredTagsObservable = this.activityForm.controls[
       'tags'
     ].valueChanges.pipe(
-      startWith(this.activityForm.controls['tags'].value),
+      startWith(this.activityForm.get('tags').value),
       map((aTags: Tag[] | null) => {
         return aTags ? this.filterTags(aTags) : this.tags.slice();
       })
     );
 
-    this.activityForm.controls['type'].valueChanges
-      .pipe(takeUntil(this.unsubscribeSubject))
+    this.activityForm
+      .get('type')
+      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((type: Type) => {
         if (type === 'ITEM') {
-          this.activityForm.controls['accountId'].removeValidators(
-            Validators.required
-          );
-          this.activityForm.controls['accountId'].updateValueAndValidity();
+          this.activityForm
+            .get('accountId')
+            .removeValidators(Validators.required);
+          this.activityForm.get('accountId').updateValueAndValidity();
 
           const currency =
             this.data.accounts.find(({ id }) => {
-              return id === this.activityForm.controls['accountId'].value;
+              return id === this.activityForm.get('accountId').value;
             })?.currency ?? this.data.user.settings.baseCurrency;
 
-          this.activityForm.controls['currency'].setValue(currency);
-          this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
-
-          this.activityForm.controls['dataSource'].removeValidators(
-            Validators.required
-          );
-          this.activityForm.controls['dataSource'].updateValueAndValidity();
-          this.activityForm.controls['feeInCustomCurrency'].reset();
-          this.activityForm.controls['name'].setValidators(Validators.required);
-          this.activityForm.controls['name'].updateValueAndValidity();
-          this.activityForm.controls['quantity'].setValue(1);
-          this.activityForm.controls['searchSymbol'].removeValidators(
-            Validators.required
-          );
-          this.activityForm.controls['searchSymbol'].updateValueAndValidity();
-          this.activityForm.controls['updateAccountBalance'].disable();
-          this.activityForm.controls['updateAccountBalance'].setValue(false);
+          this.activityForm.get('currency').setValue(currency);
+          this.activityForm.get('currencyOfUnitPrice').setValue(currency);
+
+          this.activityForm
+            .get('dataSource')
+            .removeValidators(Validators.required);
+          this.activityForm.get('dataSource').updateValueAndValidity();
+          this.activityForm.get('feeInCustomCurrency').reset();
+          this.activityForm.get('name').setValidators(Validators.required);
+          this.activityForm.get('name').updateValueAndValidity();
+          this.activityForm.get('quantity').setValue(1);
+          this.activityForm
+            .get('searchSymbol')
+            .removeValidators(Validators.required);
+          this.activityForm.get('searchSymbol').updateValueAndValidity();
+          this.activityForm.get('updateAccountBalance').disable();
+          this.activityForm.get('updateAccountBalance').setValue(false);
         } else if (
           type === 'FEE' ||
           type === 'INTEREST' ||
           type === 'LIABILITY'
         ) {
-          this.activityForm.controls['accountId'].removeValidators(
-            Validators.required
-          );
-          this.activityForm.controls['accountId'].updateValueAndValidity();
+          this.activityForm
+            .get('accountId')
+            .removeValidators(Validators.required);
+          this.activityForm.get('accountId').updateValueAndValidity();
 
           const currency =
             this.data.accounts.find(({ id }) => {
-              return id === this.activityForm.controls['accountId'].value;
+              return id === this.activityForm.get('accountId').value;
             })?.currency ?? this.data.user.settings.baseCurrency;
 
-          this.activityForm.controls['currency'].setValue(currency);
-          this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
+          this.activityForm.get('currency').setValue(currency);
+          this.activityForm.get('currencyOfUnitPrice').setValue(currency);
 
-          this.activityForm.controls['dataSource'].removeValidators(
-            Validators.required
-          );
-          this.activityForm.controls['dataSource'].updateValueAndValidity();
+          this.activityForm
+            .get('dataSource')
+            .removeValidators(Validators.required);
+          this.activityForm.get('dataSource').updateValueAndValidity();
 
           if (
             (type === 'FEE' &&
-              this.activityForm.controls['feeInCustomCurrency'].value === 0) ||
+              this.activityForm.get('feeInCustomCurrency').value === 0) ||
             type === 'INTEREST' ||
             type === 'LIABILITY'
           ) {
-            this.activityForm.controls['feeInCustomCurrency'].reset();
+            this.activityForm.get('feeInCustomCurrency').reset();
           }
 
-          this.activityForm.controls['name'].setValidators(Validators.required);
-          this.activityForm.controls['name'].updateValueAndValidity();
+          this.activityForm.get('name').setValidators(Validators.required);
+          this.activityForm.get('name').updateValueAndValidity();
 
           if (type === 'FEE') {
-            this.activityForm.controls['quantity'].setValue(0);
+            this.activityForm.get('quantity').setValue(0);
           } else if (type === 'INTEREST' || type === 'LIABILITY') {
-            this.activityForm.controls['quantity'].setValue(1);
+            this.activityForm.get('quantity').setValue(1);
           }
 
-          this.activityForm.controls['searchSymbol'].removeValidators(
-            Validators.required
-          );
-          this.activityForm.controls['searchSymbol'].updateValueAndValidity();
+          this.activityForm
+            .get('searchSymbol')
+            .removeValidators(Validators.required);
+          this.activityForm.get('searchSymbol').updateValueAndValidity();
 
           if (type === 'FEE') {
-            this.activityForm.controls['unitPriceInCustomCurrency'].setValue(0);
+            this.activityForm.get('unitPriceInCustomCurrency').setValue(0);
           }
 
           if (
             ['FEE', 'INTEREST'].includes(type) &&
-            this.activityForm.controls['accountId'].value
+            this.activityForm.get('accountId').value
           ) {
-            this.activityForm.controls['updateAccountBalance'].enable();
+            this.activityForm.get('updateAccountBalance').enable();
           } else {
-            this.activityForm.controls['updateAccountBalance'].disable();
-            this.activityForm.controls['updateAccountBalance'].setValue(false);
+            this.activityForm.get('updateAccountBalance').disable();
+            this.activityForm.get('updateAccountBalance').setValue(false);
           }
         } else {
-          this.activityForm.controls['accountId'].setValidators(
-            Validators.required
-          );
-          this.activityForm.controls['accountId'].updateValueAndValidity();
-          this.activityForm.controls['dataSource'].setValidators(
-            Validators.required
-          );
-          this.activityForm.controls['dataSource'].updateValueAndValidity();
-          this.activityForm.controls['name'].removeValidators(
-            Validators.required
-          );
-          this.activityForm.controls['name'].updateValueAndValidity();
-          this.activityForm.controls['searchSymbol'].setValidators(
-            Validators.required
-          );
-          this.activityForm.controls['searchSymbol'].updateValueAndValidity();
-          this.activityForm.controls['updateAccountBalance'].enable();
+          this.activityForm.get('accountId').setValidators(Validators.required);
+          this.activityForm.get('accountId').updateValueAndValidity();
+          this.activityForm
+            .get('dataSource')
+            .setValidators(Validators.required);
+          this.activityForm.get('dataSource').updateValueAndValidity();
+          this.activityForm.get('name').removeValidators(Validators.required);
+          this.activityForm.get('name').updateValueAndValidity();
+          this.activityForm
+            .get('searchSymbol')
+            .setValidators(Validators.required);
+          this.activityForm.get('searchSymbol').updateValueAndValidity();
+          this.activityForm.get('updateAccountBalance').enable();
         }
 
         this.changeDetectorRef.markForCheck();
       });
 
-    this.activityForm.controls['type'].setValue(this.data.activity?.type);
+    this.activityForm.get('type').setValue(this.data.activity?.type);
 
     if (this.data.activity?.id) {
-      this.activityForm.controls['searchSymbol'].disable();
-      this.activityForm.controls['type'].disable();
+      this.activityForm.get('searchSymbol').disable();
+      this.activityForm.get('type').disable();
     }
 
     if (this.data.activity?.SymbolProfile?.symbol) {
@@ -425,14 +416,14 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
   public applyCurrentMarketPrice() {
     this.activityForm.patchValue({
-      currencyOfUnitPrice: this.activityForm.controls['currency'].value,
+      currencyOfUnitPrice: this.activityForm.get('currency').value,
       unitPriceInCustomCurrency: this.currentMarketPrice
     });
   }
 
   public onAddTag(event: MatAutocompleteSelectedEvent) {
-    this.activityForm.controls['tags'].setValue([
-      ...(this.activityForm.controls['tags'].value ?? []),
+    this.activityForm.get('tags').setValue([
+      ...(this.activityForm.get('tags').value ?? []),
       this.tags.find(({ id }) => {
         return id === event.option.value;
       })
@@ -445,8 +436,8 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
   }
 
   public onRemoveTag(aTag: Tag) {
-    this.activityForm.controls['tags'].setValue(
-      this.activityForm.controls['tags'].value.filter(({ id }) => {
+    this.activityForm.get('tags').setValue(
+      this.activityForm.get('tags').value.filter(({ id }) => {
         return id !== aTag.id;
       })
     );
@@ -454,25 +445,24 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
   public async onSubmit() {
     const activity: CreateOrderDto | UpdateOrderDto = {
-      accountId: this.activityForm.controls['accountId'].value,
-      assetClass: this.activityForm.controls['assetClass'].value,
-      assetSubClass: this.activityForm.controls['assetSubClass'].value,
-      comment: this.activityForm.controls['comment'].value,
-      currency: this.activityForm.controls['currency'].value,
-      customCurrency: this.activityForm.controls['currencyOfUnitPrice'].value,
-      date: this.activityForm.controls['date'].value,
-      dataSource: this.activityForm.controls['dataSource'].value,
-      fee: this.activityForm.controls['fee'].value,
-      quantity: this.activityForm.controls['quantity'].value,
+      accountId: this.activityForm.get('accountId').value,
+      assetClass: this.activityForm.get('assetClass').value,
+      assetSubClass: this.activityForm.get('assetSubClass').value,
+      comment: this.activityForm.get('comment').value,
+      currency: this.activityForm.get('currency').value,
+      customCurrency: this.activityForm.get('currencyOfUnitPrice').value,
+      date: this.activityForm.get('date').value,
+      dataSource: this.activityForm.get('dataSource').value,
+      fee: this.activityForm.get('fee').value,
+      quantity: this.activityForm.get('quantity').value,
       symbol:
-        this.activityForm.controls['searchSymbol'].value?.symbol ===
-          undefined ||
-        isUUID(this.activityForm.controls['searchSymbol'].value?.symbol)
-          ? this.activityForm.controls['name'].value
-          : this.activityForm.controls['searchSymbol'].value.symbol,
-      tags: this.activityForm.controls['tags'].value,
-      type: this.activityForm.controls['type'].value,
-      unitPrice: this.activityForm.controls['unitPrice'].value
+        this.activityForm.get('searchSymbol').value?.symbol === undefined ||
+        isUUID(this.activityForm.get('searchSymbol').value?.symbol)
+          ? this.activityForm.get('name').value
+          : this.activityForm.get('searchSymbol').value.symbol,
+      tags: this.activityForm.get('tags').value,
+      type: this.activityForm.get('type').value,
+      unitPrice: this.activityForm.get('unitPrice').value
     };
 
     try {
@@ -487,7 +477,7 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         });
       } else {
         (activity as CreateOrderDto).updateAccountBalance =
-          this.activityForm.controls['updateAccountBalance'].value;
+          this.activityForm.get('updateAccountBalance').value;
 
         await validateObjectForForm({
           classDto: CreateOrderDto,
@@ -524,8 +514,8 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
     this.dataService
       .fetchSymbolItem({
-        dataSource: this.activityForm.controls['dataSource'].value,
-        symbol: this.activityForm.controls['searchSymbol'].value.symbol
+        dataSource: this.activityForm.get('dataSource').value,
+        symbol: this.activityForm.get('searchSymbol').value.symbol
       })
       .pipe(
         catchError(() => {
@@ -540,9 +530,9 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         takeUntil(this.unsubscribeSubject)
       )
       .subscribe(({ currency, dataSource, marketPrice }) => {
-        this.activityForm.controls['currency'].setValue(currency);
-        this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
-        this.activityForm.controls['dataSource'].setValue(dataSource);
+        this.activityForm.get('currency').setValue(currency);
+        this.activityForm.get('currencyOfUnitPrice').setValue(currency);
+        this.activityForm.get('dataSource').setValue(dataSource);
 
         this.currentMarketPrice = marketPrice;
 

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

@@ -12,7 +12,7 @@
         <mat-label i18n>Type</mat-label>
         <mat-select formControlName="type">
           <mat-select-trigger>{{
-            typesTranslationMap[activityForm.controls['type'].value]
+            typesTranslationMap[activityForm.get('type').value]
           }}</mat-select-trigger>
           <mat-option value="BUY">
             <span
@@ -83,9 +83,7 @@
         <mat-select formControlName="accountId">
           <mat-option
             *ngIf="
-              !activityForm.controls['accountId'].hasValidator(
-                Validators.required
-              )
+              !activityForm.get('accountId').hasValidator(Validators.required)
             "
             [value]="null"
           />
@@ -113,9 +111,9 @@
     <div
       class="mb-3"
       [ngClass]="{
-        'd-none': !activityForm.controls['searchSymbol'].hasValidator(
-          Validators.required
-        )
+        'd-none': !activityForm
+          .get('searchSymbol')
+          .hasValidator(Validators.required)
       }"
     >
       <mat-form-field appearance="outline" class="w-100">
@@ -129,9 +127,7 @@
     <div
       class="mb-3"
       [ngClass]="{
-        'd-none': !activityForm.controls['name'].hasValidator(
-          Validators.required
-        )
+        'd-none': !activityForm.get('name').hasValidator(Validators.required)
       }"
     >
       <mat-form-field appearance="outline" class="w-100">
@@ -173,10 +169,10 @@
       class="mb-3"
       [ngClass]="{
         'd-none':
-          activityForm.controls['type']?.value === 'FEE' ||
-          activityForm.controls['type']?.value === 'INTEREST' ||
-          activityForm.controls['type']?.value === 'ITEM' ||
-          activityForm.controls['type']?.value === 'LIABILITY'
+          activityForm.get('type')?.value === 'FEE' ||
+          activityForm.get('type')?.value === 'INTEREST' ||
+          activityForm.get('type')?.value === 'ITEM' ||
+          activityForm.get('type')?.value === 'LIABILITY'
       }"
     >
       <mat-form-field appearance="outline" class="w-100">
@@ -186,12 +182,12 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'FEE' }"
+      [ngClass]="{ 'd-none': activityForm.get('type')?.value === 'FEE' }"
     >
       <div class="align-items-start d-flex">
         <mat-form-field appearance="outline" class="w-100">
           <mat-label
-            ><ng-container [ngSwitch]="activityForm.controls['type']?.value">
+            ><ng-container [ngSwitch]="activityForm.get('type')?.value">
               <ng-container *ngSwitchCase="'DIVIDEND'" i18n
                 >Dividend</ng-container
               >
@@ -211,7 +207,7 @@
           <div
             class="ml-2"
             matTextSuffix
-            [ngClass]="{ 'd-none': !activityForm.controls['currency']?.value }"
+            [ngClass]="{ 'd-none': !activityForm.get('currency')?.value }"
           >
             <mat-select formControlName="currencyOfUnitPrice">
               <mat-option
@@ -224,16 +220,14 @@
           </div>
           <mat-error
             *ngIf="
-              activityForm.controls['unitPriceInCustomCurrency'].hasError(
-                'invalid'
-              )
+              activityForm.get('unitPriceInCustomCurrency').hasError('invalid')
             "
             ><ng-container i18n
               >Oops! Could not get the historical exchange rate
               from</ng-container
             >
             {{
-              activityForm.controls['date']?.value | date: defaultDateFormat
+              activityForm.get('date')?.value | date: defaultDateFormat
             }}</mat-error
           >
         </mat-form-field>
@@ -241,7 +235,7 @@
           *ngIf="
             currentMarketPrice &&
             (data.activity.type === 'BUY' || data.activity.type === 'SELL') &&
-            isToday(activityForm.controls['date']?.value)
+            isToday(activityForm.get('date')?.value)
           "
           class="ml-2 mt-1 no-min-width"
           mat-button
@@ -256,7 +250,7 @@
     <div class="d-none">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label
-          ><ng-container [ngSwitch]="activityForm.controls['type']?.value">
+          ><ng-container [ngSwitch]="activityForm.get('type')?.value">
             <ng-container *ngSwitchCase="'DIVIDEND'" i18n
               >Dividend</ng-container
             >
@@ -269,7 +263,7 @@
         </mat-label>
         <input formControlName="unitPrice" matInput type="number" />
         <span class="ml-2" matTextSuffix>{{
-          activityForm.controls['currency'].value
+          activityForm.get('currency').value
         }}</span>
       </mat-form-field>
     </div>
@@ -277,9 +271,9 @@
       class="mb-3"
       [ngClass]="{
         'd-none':
-          activityForm.controls['type']?.value === 'INTEREST' ||
-          activityForm.controls['type']?.value === 'ITEM' ||
-          activityForm.controls['type']?.value === 'LIABILITY'
+          activityForm.get('type')?.value === 'INTEREST' ||
+          activityForm.get('type')?.value === 'ITEM' ||
+          activityForm.get('type')?.value === 'LIABILITY'
       }"
     >
       <mat-form-field appearance="outline" class="w-100">
@@ -288,19 +282,17 @@
         <div
           class="ml-2"
           matTextSuffix
-          [ngClass]="{ 'd-none': !activityForm.controls['currency']?.value }"
+          [ngClass]="{ 'd-none': !activityForm.get('currency')?.value }"
         >
-          {{ activityForm.controls['currencyOfUnitPrice'].value }}
+          {{ activityForm.get('currencyOfUnitPrice').value }}
         </div>
         <mat-error
-          *ngIf="
-            activityForm.controls['feeInCustomCurrency'].hasError('invalid')
-          "
+          *ngIf="activityForm.get('feeInCustomCurrency').hasError('invalid')"
           ><ng-container i18n
             >Oops! Could not get the historical exchange rate from</ng-container
           >
           {{
-            activityForm.controls['date']?.value | date: defaultDateFormat
+            activityForm.get('date')?.value | date: defaultDateFormat
           }}</mat-error
         >
       </mat-form-field>
@@ -310,7 +302,7 @@
         <mat-label i18n>Fee</mat-label>
         <input formControlName="fee" matInput type="number" />
         <span class="ml-2" matTextSuffix>{{
-          activityForm.controls['currency'].value
+          activityForm.get('currency').value
         }}</span>
       </mat-form-field>
     </div>
@@ -328,7 +320,7 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value !== 'ITEM' }"
+      [ngClass]="{ 'd-none': activityForm.get('type')?.value !== 'ITEM' }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Asset Class</mat-label>
@@ -344,7 +336,7 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value !== 'ITEM' }"
+      [ngClass]="{ 'd-none': activityForm.get('type')?.value !== 'ITEM' }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Asset Sub Class</mat-label>
@@ -363,7 +355,7 @@
         <mat-label i18n>Tags</mat-label>
         <mat-chip-grid #tagsChipList>
           <mat-chip-row
-            *ngFor="let tag of activityForm.controls['tags']?.value"
+            *ngFor="let tag of activityForm.get('tags')?.value"
             matChipRemove
             [removable]="true"
             (removed)="onRemoveTag(tag)"
@@ -399,8 +391,7 @@
       [isCurrency]="true"
       [locale]="data.user?.settings?.locale"
       [unit]="
-        activityForm.controls['currency']?.value ??
-        data.user?.settings?.baseCurrency
+        activityForm.get('currency')?.value ?? data.user?.settings?.baseCurrency
       "
       [value]="total"
     />

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -85,7 +85,7 @@ export class ImportActivitiesDialog implements OnDestroy {
 
       this.dialogTitle = $localize`Import Dividends`;
       this.mode = 'DIVIDEND';
-      this.uniqueAssetForm.controls['uniqueAsset'].disable();
+      this.uniqueAssetForm.get('uniqueAsset').disable();
 
       this.dataService
         .fetchPositions({
@@ -102,7 +102,7 @@ export class ImportActivitiesDialog implements OnDestroy {
           this.holdings = sortBy(positions, ({ name }) => {
             return name.toLowerCase();
           });
-          this.uniqueAssetForm.controls['uniqueAsset'].enable();
+          this.uniqueAssetForm.get('uniqueAsset').enable();
 
           this.isLoading = false;
 
@@ -167,10 +167,10 @@ export class ImportActivitiesDialog implements OnDestroy {
   }
 
   public onLoadDividends(aStepper: MatStepper) {
-    this.uniqueAssetForm.controls['uniqueAsset'].disable();
+    this.uniqueAssetForm.get('uniqueAsset').disable();
 
     const { dataSource, symbol } =
-      this.uniqueAssetForm.controls['uniqueAsset'].value;
+      this.uniqueAssetForm.get('uniqueAsset').value;
 
     this.dataService
       .fetchDividendsImport({
@@ -193,7 +193,7 @@ export class ImportActivitiesDialog implements OnDestroy {
     this.details = [];
     this.errorMessages = [];
     this.importStep = ImportStep.SELECT_ACTIVITIES;
-    this.uniqueAssetForm.controls['uniqueAsset'].enable();
+    this.uniqueAssetForm.get('uniqueAsset').enable();
 
     aStepper.reset();
   }

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -33,7 +33,7 @@
               <mat-label i18n>Holding</mat-label>
               <mat-select formControlName="uniqueAsset">
                 <mat-select-trigger>{{
-                  uniqueAssetForm.controls['uniqueAsset']?.value?.name
+                  uniqueAssetForm.get('uniqueAsset')?.value?.name
                 }}</mat-select-trigger>
                 <mat-option
                   *ngFor="let holding of holdings"

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -31,10 +31,7 @@
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Retirement Date</mat-label>
           <div>
-            {{
-              calculatorForm.controls['retirementDate'].value
-                | date: 'MMMM YYYY'
-            }}
+            {{ calculatorForm.get('retirementDate').value | date: 'MMMM YYYY' }}
           </div>
           <input
             class="d-none"