refactor: use FormBuilder for account form

apps/api/src/app/account/create-account.dto.ts

@@ -12,7 +12,7 @@ import { isString } from 'lodash';
 export class CreateAccountDto {
   @IsOptional()
   @IsString()
-  accountType: AccountType;
+  accountType?: AccountType;
 
   @IsNumber()
   balance: number;

apps/api/src/app/account/update-account.dto.ts

@@ -12,7 +12,7 @@ import { isString } from 'lodash';
 export class UpdateAccountDto {
   @IsOptional()
   @IsString()
-  accountType: AccountType;
+  accountType?: AccountType;
 
   @IsNumber()
   balance: number;

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

@@ -4,7 +4,10 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+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 { Subject } from 'rxjs';
 
@@ -18,6 +21,7 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
   templateUrl: 'create-or-update-account-dialog.html'
 })
 export class CreateOrUpdateAccountDialog implements OnDestroy {
+  public accountForm: FormGroup;
   public currencies: string[] = [];
   public platforms: { id: string; name: string }[];
 
@@ -26,7 +30,8 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
   public constructor(
     private dataService: DataService,
     public dialogRef: MatDialogRef<CreateOrUpdateAccountDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams,
+    private formBuilder: FormBuilder
   ) {}
 
   ngOnInit() {
@@ -34,6 +39,36 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
 
     this.currencies = currencies;
     this.platforms = platforms;
+
+    this.accountForm = this.formBuilder.group({
+      accountId: [this.data.account.id],
+      balance: [this.data.account.balance, Validators.required],
+      comment: [this.data.account.comment],
+      currency: [this.data.account.currency, Validators.required],
+      isExcluded: [this.data.account.isExcluded],
+      platformId: [this.data.account.platformId],
+      name: [this.data.account.name, Validators.required]
+    });
+  }
+
+  public onSubmit() {
+    const account: CreateAccountDto | UpdateAccountDto = {
+      balance: this.accountForm.controls['balance'].value,
+      comment: this.accountForm.controls['comment'].value,
+      currency: this.accountForm.controls['currency'].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
+    };
+
+    if (this.data.account.id) {
+      (account as UpdateAccountDto).id = this.data.account.id;
+    } else {
+      delete (account as CreateAccountDto).id;
+    }
+
+    this.dialogRef.close({ account });
   }
 
   public onCancel() {

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

@@ -1,17 +1,22 @@
-<form #addAccountForm="ngForm" class="d-flex flex-column h-100">
+<form 
+  class="d-flex flex-column h-100"
+  [formGroup]="accountForm"
+  (keyup.enter)="accountForm.valid && onSubmit()"
+  (ngSubmit)="onSubmit()"
+>
   <h1 *ngIf="data.account.id" i18n mat-dialog-title>Update account</h1>
   <h1 *ngIf="!data.account.id" i18n mat-dialog-title>Add account</h1>
   <div class="flex-grow-1 py-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name</mat-label>
-        <input matInput name="name" required [(ngModel)]="data.account.name" />
+        <input matInput formControlName="name" required />
       </mat-form-field>
     </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
-        <mat-select name="currency" required [(value)]="data.account.currency">
+        <mat-select formControlName="currency" required>
           <mat-option *ngFor="let currency of currencies" [value]="currency"
             >{{ currency }}</mat-option
           >
@@ -22,11 +27,10 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Cash Balance</mat-label>
         <input
+          formControlName="balance"
           matInput
-          name="balance"
           required
           type="number"
-          [(ngModel)]="data.account.balance"
         />
         <span class="ml-2" matTextSuffix>{{ data.account.currency }}</span>
       </mat-form-field>
@@ -34,7 +38,7 @@
     <div [ngClass]="{ 'd-none': platforms?.length < 1 }">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Platform</mat-label>
-        <mat-select name="platformId" [(value)]="data.account.platformId">
+        <mat-select formControlName="platformId">
           <mat-option [value]="null"></mat-option>
           <mat-option *ngFor="let platform of platforms" [value]="platform.id"
             >{{ platform.name }}</mat-option
@@ -48,9 +52,8 @@
         <textarea
           cdkAutosizeMinRows="2"
           cdkTextareaAutosize
+          formControlName="comment"
           matInput
-          name="comment"
-          [(ngModel)]="data.account.comment"
           (keyup.enter)="$event.stopPropagation()"
         ></textarea>
       </mat-form-field>
@@ -58,8 +61,7 @@
     <div class="mb-3 px-2">
       <mat-checkbox
         color="primary"
-        name="isExcluded"
+        formControlName="isExcluded"
-        [(ngModel)]="data.account.isExcluded"
         >Exclude from Analysis</mat-checkbox
       >
     </div>
@@ -68,9 +70,8 @@
         <mat-label i18n>Account ID</mat-label>
         <input
           disabled
+          formControlName="accountId"
           matInput
-          name="accountId"
-          [(ngModel)]="data.account.id"
         />
       </mat-form-field>
     </div>
@@ -80,8 +81,8 @@
     <button
       color="primary"
       mat-flat-button
-      [disabled]="!addAccountForm.form.valid"
+      type="submit"
-      [mat-dialog-close]="data"
+      [disabled]="!accountForm.valid"
     >
       <ng-container i18n>Save</ng-container>
     </button>