Address Comments

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

@@ -1,7 +1,7 @@
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { validateObjectForForm } from '@ghostfolio/client/util/validation.util';
+import { validateObjectForForm } from '@ghostfolio/client/util/form.util';
 import { Currency } from '@ghostfolio/common/interfaces';
 
 import {
@@ -116,14 +116,18 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
 
     if (this.data.account.id) {
       (account as UpdateAccountDto).id = this.data.account.id;
-      validateObjectForForm(account, UpdateAccountDto, this.accountForm, () => {
-        this.dialogRef.close({ account });
-      });
+      validateObjectForForm(account, UpdateAccountDto, this.accountForm).then(
+        () => {
+          this.dialogRef.close({ account });
+        }
+      );
     } else {
       delete (account as CreateAccountDto).id;
-      validateObjectForForm(account, CreateAccountDto, this.accountForm, () => {
-        this.dialogRef.close({ account });
-      });
+      validateObjectForForm(account, CreateAccountDto, this.accountForm).then(
+        () => {
+          this.dialogRef.close({ account });
+        }
+      );
     }
   }
 

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

@@ -18,9 +18,6 @@
           matInput
           (keydown.enter)="$event.stopPropagation()"
         />
-        <mat-error *ngIf="accountForm.controls['name'].errors?.validationError">
-          {{ accountForm.controls['name'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div>
@@ -30,11 +27,6 @@
           formControlName="currency"
           [currencies]="currencies"
         />
-        <mat-error
-          *ngIf="accountForm.controls['currency'].errors?.validationError"
-        >
-          {{ accountForm.controls['currency'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div>
@@ -49,11 +41,6 @@
         <span class="ml-2" matTextSuffix>{{
           accountForm.controls['currency']?.value?.value
         }}</span>
-        <mat-error
-          *ngIf="accountForm.controls['balance'].errors?.validationError"
-        >
-          {{ accountForm.controls['balance'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div [ngClass]="{ 'd-none': platforms?.length < 1 }">
@@ -84,11 +71,6 @@
             </mat-option>
           }
         </mat-autocomplete>
-        <mat-error
-          *ngIf="accountForm.controls['platformId'].errors?.validationError"
-        >
-          {{ accountForm.controls['platformId'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div>
@@ -101,11 +83,6 @@
           matInput
           (keyup.enter)="$event.stopPropagation()"
         ></textarea>
-        <mat-error
-          *ngIf="accountForm.controls['comment'].errors?.validationError"
-        >
-          {{ accountForm.controls['comment'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div class="mb-3 px-2">
@@ -118,11 +95,6 @@
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Account ID</mat-label>
           <input formControlName="accountId" matInput />
-          <mat-error
-            *ngIf="accountForm.controls['accountId'].errors?.validationError"
-          >
-            {{ accountForm.controls['accountId'].errors?.validationError }}
-          </mat-error>
         </mat-form-field>
       </div>
     }

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

@@ -1,7 +1,7 @@
 import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { validateObjectForForm } from '@ghostfolio/client/util/validation.util';
+import { validateObjectForForm } from '@ghostfolio/client/util/form.util';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import { translate } from '@ghostfolio/ui/i18n';
 
@@ -477,15 +477,19 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
     if (this.data.activity.id) {
       (activity as UpdateOrderDto).id = this.data.activity.id;
-      validateObjectForForm(activity, UpdateOrderDto, this.activityForm, () => {
-        this.dialogRef.close({ activity });
-      });
+      validateObjectForForm(activity, UpdateOrderDto, this.activityForm).then(
+        () => {
+          this.dialogRef.close({ activity });
+        }
+      );
     } else {
       (activity as CreateOrderDto).updateAccountBalance =
         this.activityForm.controls['updateAccountBalance'].value;
-      validateObjectForForm(activity, CreateOrderDto, this.activityForm, () => {
-        this.dialogRef.close({ activity });
-      });
+      validateObjectForForm(activity, CreateOrderDto, this.activityForm).then(
+        () => {
+          this.dialogRef.close({ activity });
+        }
+      );
     }
   }
 

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

@@ -71,11 +71,6 @@
             >
           </mat-option>
         </mat-select>
-        <mat-error
-          *ngIf="activityForm.controls['type'].errors?.validationError"
-        >
-          {{ activityForm.controls['type'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div [ngClass]="{ 'mb-3': data.activity.id }">
@@ -108,11 +103,6 @@
             </div>
           </mat-option>
         </mat-select>
-        <mat-error
-          *ngIf="activityForm.controls['accountId'].errors?.validationError"
-        >
-          {{ activityForm.controls['accountId'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div class="mb-3" [ngClass]="{ 'd-none': data.activity.id }">
@@ -134,11 +124,6 @@
           formControlName="searchSymbol"
           [isLoading]="isLoading"
         />
-        <mat-error
-          *ngIf="activityForm.controls['searchSymbol'].errors?.validationError"
-        >
-          {{ activityForm.controls['searchSymbol'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div
@@ -152,11 +137,6 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name</mat-label>
         <input formControlName="name" matInput />
-        <mat-error
-          *ngIf="activityForm.controls['name'].errors?.validationError"
-        >
-          {{ activityForm.controls['name'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div class="d-none">
@@ -167,11 +147,6 @@
             currency
           }}</mat-option>
         </mat-select>
-        <mat-error
-          *ngIf="activityForm.controls['currency'].errors?.validationError"
-        >
-          {{ activityForm.controls['currency'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div class="d-none">
@@ -197,11 +172,6 @@
           />
         </mat-datepicker-toggle>
         <mat-datepicker #date disabled="false" />
-        <mat-error
-          *ngIf="activityForm.controls['date'].errors?.validationError"
-        >
-          {{ activityForm.controls['date'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div
@@ -217,11 +187,6 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Quantity</mat-label>
         <input formControlName="quantity" matInput type="number" />
-        <mat-error
-          *ngIf="activityForm.controls['quantity'].errors?.validationError"
-        >
-          {{ activityForm.controls['quantity'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div
@@ -262,20 +227,6 @@
               </mat-option>
             </mat-select>
           </div>
-          <mat-error
-            *ngIf="
-              activityForm.controls['unitPriceInCustomCurrency'].hasError(
-                'invalid'
-              )
-            "
-            ><ng-container i18n
-              >Oops! Could not get the historical exchange rate
-              from</ng-container
-            >
-            {{
-              activityForm.controls['date']?.value | date: defaultDateFormat
-            }}</mat-error
-          >
         </mat-form-field>
         <button
           *ngIf="
@@ -311,11 +262,6 @@
         <span class="ml-2" matTextSuffix>{{
           activityForm.controls['currency'].value
         }}</span>
-        <mat-error
-          *ngIf="activityForm.controls['unitPrice'].errors?.validationError"
-        >
-          {{ activityForm.controls['unitPrice'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div
@@ -337,17 +283,6 @@
         >
           {{ activityForm.controls['currencyOfUnitPrice'].value }}
         </div>
-        <mat-error
-          *ngIf="
-            activityForm.controls['feeInCustomCurrency'].hasError('invalid')
-          "
-          ><ng-container i18n
-            >Oops! Could not get the historical exchange rate from</ng-container
-          >
-          {{
-            activityForm.controls['date']?.value | date: defaultDateFormat
-          }}</mat-error
-        >
       </mat-form-field>
     </div>
     <div class="d-none">
@@ -357,9 +292,6 @@
         <span class="ml-2" matTextSuffix>{{
           activityForm.controls['currency'].value
         }}</span>
-        <mat-error *ngIf="activityForm.controls['fee'].errors?.validationError">
-          {{ activityForm.controls['fee'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div class="mb-3">
@@ -372,11 +304,6 @@
           matInput
           (keyup.enter)="$event.stopPropagation()"
         ></textarea>
-        <mat-error
-          *ngIf="activityForm.controls['comment'].errors?.validationError"
-        >
-          {{ activityForm.controls['comment'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div
@@ -393,11 +320,6 @@
             >{{ assetClass.label }}</mat-option
           >
         </mat-select>
-        <mat-error
-          *ngIf="activityForm.controls['assetClass'].errors?.validationError"
-        >
-          {{ activityForm.controls['assetClass'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div
@@ -414,11 +336,6 @@
             >{{ assetSubClass.label }}</mat-option
           >
         </mat-select>
-        <mat-error
-          *ngIf="activityForm.controls['assetSubClass'].errors?.validationError"
-        >
-          {{ activityForm.controls['assetSubClass'].errors?.validationError }}
-        </mat-error>
       </mat-form-field>
     </div>
     <div class="mb-3" [ngClass]="{ 'd-none': tags?.length < 1 }">

apps/client/src/app/util/form.util.ts

@@ -0,0 +1,25 @@
+import { FormGroup } from '@angular/forms';
+import { plainToInstance } from 'class-transformer';
+import { validate } from 'class-validator';
+
+export async function validateObjectForForm<T>(
+  object: T,
+  classDto: { new (): T },
+  form: FormGroup
+): Promise<void> {
+  const objectInstance = plainToInstance(classDto, object);
+  const errors = await validate(objectInstance as object);
+
+  if (errors.length === 0) return Promise.resolve();
+
+  for (const error of errors) {
+    const formControl = form.get(error.property);
+    if (formControl) {
+      formControl.setErrors({
+        validationError: Object.values(error.constraints)[0]
+      });
+    }
+  }
+
+  return Promise.reject(errors);
+}

apps/client/src/app/util/validation.util.ts

@@ -1,27 +0,0 @@
-import { FormGroup } from '@angular/forms';
-import { plainToInstance } from 'class-transformer';
-import { validate } from 'class-validator';
-
-export function validateObjectForForm<T>(
-  obj: T,
-  ctor: { new (): T },
-  form: FormGroup,
-  onSuccess: () => void
-): void {
-  const objInstance = plainToInstance(ctor, obj);
-
-  validate(objInstance as object).then((errors) => {
-    if (errors.length === 0) {
-      onSuccess();
-    } else {
-      errors.forEach((error) => {
-        const formControl = form.get(error.property);
-        if (formControl) {
-          formControl.setErrors({
-            validationError: Object.values(error.constraints)[0]
-          });
-        }
-      });
-    }
-  });
-}