Validate tag DTO

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

@@ -142,9 +142,7 @@ export class AdminTagComponent implements OnInit, OnDestroy {
     dialogRef
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((data) => {
-        const tag: CreateTagDto = data?.tag;
-
+      .subscribe((tag: CreateTagDto) => {
         if (tag) {
           this.adminService
             .postTag(tag)

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

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

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

@@ -1,11 +1,20 @@
-<form #addTagForm="ngForm" class="d-flex flex-column h-100">
+<form
+  class="d-flex flex-column h-100"
+  [formGroup]="tagForm"
+  (keyup.enter)="tagForm.valid && onSubmit()"
+  (ngSubmit)="onSubmit()"
+>
   <h1 *ngIf="data.tag.id" i18n mat-dialog-title>Update tag</h1>
   <h1 *ngIf="!data.tag.id" i18n mat-dialog-title>Add tag</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.tag.name" />
+        <input
+          formControlName="name"
+          matInput
+          (keydown.enter)="$event.stopPropagation()"
+        />
       </mat-form-field>
     </div>
   </div>
@@ -14,8 +23,8 @@
     <button
       color="primary"
       mat-flat-button
-      [disabled]="!addTagForm.form.valid"
-      [mat-dialog-close]="data"
+      type="submit"
+      [disabled]="!tagForm.valid"
     >
       <ng-container i18n>Save</ng-container>
     </button>