Validate platform DTO

apps/client/src/app/components/admin-platform/admin-platform.component.ts

@@ -143,9 +143,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     dialogRef
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((data) => {
-        const platform: CreatePlatformDto = data?.platform;
-
+      .subscribe((platform: CreatePlatformDto) => {
         if (platform) {
           this.adminService
             .postPlatform(platform)

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.dto';
+import { validateObjectForForm } from '@ghostfolio/client/util/form.util';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  OnDestroy
+} from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 
@@ -11,13 +20,38 @@ import { CreateOrUpdatePlatformDialogParams } from './interfaces/interfaces';
   styleUrls: ['./create-or-update-platform-dialog.scss'],
   templateUrl: 'create-or-update-platform-dialog.html'
 })
-export class CreateOrUpdatePlatformDialog {
+export class CreateOrUpdatePlatformDialog implements OnDestroy {
+  public platformForm: FormGroup;
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdatePlatformDialogParams,
-    public dialogRef: MatDialogRef<CreateOrUpdatePlatformDialog>
-  ) {}
+    public dialogRef: MatDialogRef<CreateOrUpdatePlatformDialog>,
+    private formBuilder: FormBuilder
+  ) {
+    this.platformForm = this.formBuilder.group({
+      name: [this.data.platform.name, Validators.required],
+      url: [this.data.platform.url, Validators.required]
+    });
+  }
+
+  public async onSubmit() {
+    try {
+      const platform: CreatePlatformDto = {
+        name: this.platformForm.get('name')?.value,
+        url: this.platformForm.get('url')?.value
+      };
+
+      await validateObjectForForm({
+        classDto: CreatePlatformDto,
+        form: this.platformForm,
+        object: platform
+      });
+      this.dialogRef.close(platform);
+    } catch (error) {
+      console.error(error);
+    }
+  }
 
   public onCancel() {
     this.dialogRef.close();

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html

@@ -1,17 +1,30 @@
-<form #addPlatformForm="ngForm" class="d-flex flex-column h-100">
+<form
+  class="d-flex flex-column h-100"
+  [formGroup]="platformForm"
+  (keyup.enter)="platformForm.valid && onSubmit()"
+  (ngSubmit)="onSubmit()"
+>
   <h1 *ngIf="data.platform.id" i18n mat-dialog-title>Update platform</h1>
   <h1 *ngIf="!data.platform.id" i18n mat-dialog-title>Add platform</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.platform.name" />
+        <input
+          formControlName="name"
+          matInput
+          (keydown.enter)="$event.stopPropagation()"
+        />
       </mat-form-field>
     </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Url</mat-label>
-        <input matInput name="url" required [(ngModel)]="data.platform.url" />
+        <input
+          formControlName="url"
+          matInput
+          (keydown.enter)="$event.stopPropagation()"
+        />
         @if (data.platform.url) {
           <gf-asset-profile-icon
             class="mr-3"
@@ -27,8 +40,8 @@
     <button
       color="primary"
       mat-flat-button
-      [disabled]="!addPlatformForm.form.valid"
-      [mat-dialog-close]="data"
+      type="submit"
+      [disabled]="!platformForm.valid"
     >
       <ng-container i18n>Save</ng-container>
     </button>