Updated as per suggestions

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

@@ -1,9 +1,3 @@
 :host {
   display: block;
 }
-
-.mat-internal-form-field > label {
-  font-size: 16px;
-  margin-bottom: 0 !important;
-  cursor: pointer;
-}

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

@@ -5,10 +5,10 @@ import { PROPERTY_CURRENCIES } from '@ghostfolio/common/config';
 
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   OnDestroy,
-  OnInit,
+  OnInit
-  ViewEncapsulation
 } from '@angular/core';
 import {
   AbstractControl,
@@ -28,32 +28,35 @@ import { Subject, takeUntil } from 'rxjs';
   host: { class: 'h-100' },
   selector: 'gf-create-asset-profile-dialog',
   styleUrls: ['./create-asset-profile-dialog.component.scss'],
-  templateUrl: 'create-asset-profile-dialog.html',
+  templateUrl: 'create-asset-profile-dialog.html'
-  encapsulation: ViewEncapsulation.None
 })
 export class CreateAssetProfileDialog implements OnInit, OnDestroy {
   public createAssetProfileForm: FormGroup;
-  public mode: 'auto' | 'manual' | 'currency';
+  public mode: 'auto' | 'currency' | 'manual';
   public customCurrencies: string[];
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     public readonly adminService: AdminService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private readonly dataService: DataService,
     public readonly dialogRef: MatDialogRef<CreateAssetProfileDialog>,
-    public readonly formBuilder: FormBuilder,
+    public readonly formBuilder: FormBuilder
-    private dataService: DataService,
-    private notificationService: NotificationService,
-    private router: Router
   ) {}
 
   public ngOnInit() {
     this.fetchAdminData();
+
     this.createAssetProfileForm = this.formBuilder.group(
       {
+        addCurrency: new FormControl(null, [
+          Validators.required,
+          Validators.minLength(3),
+          Validators.maxLength(3)
+        ]),
         addSymbol: new FormControl(null, [Validators.required]),
-        searchSymbol: new FormControl(null, [Validators.required]),
+        searchSymbol: new FormControl(null, [Validators.required])
-        addCurrency: new FormControl(null, [Validators.required])
       },
       {
         validators: this.atLeastOneValid
@@ -67,7 +70,7 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
     this.dialogRef.close();
   }
 
-  public onRadioChange(mode: 'auto' | 'manual' | 'currency') {
+  public onRadioChange(mode: 'auto' | 'currency' | 'manual') {
     this.mode = mode;
   }
 
@@ -87,18 +90,11 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
       const currency = this.createAssetProfileForm
         .get('addCurrency')
         .value.toUpperCase();
+
       if (currency.length === 3) {
         const currencies = uniq([...this.customCurrencies, currency]);
         this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies });
         this.dialogRef.close();
-        this.notificationService.alert({
-          title: $localize`Currency added successfully!`
-        });
-      } else {
-        this.notificationService.alert({
-          title: $localize`${currency} is an invalid currency!`,
-          message: $localize`Currency should be 3 characters in length`
-        });
       }
     }
   }
@@ -109,25 +105,25 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
   }
 
   private atLeastOneValid(control: AbstractControl): ValidationErrors {
+    const addCurrencyControl = control.get('addCurrency');
     const addSymbolControl = control.get('addSymbol');
     const searchSymbolControl = control.get('searchSymbol');
-    const addCurrencyControl = control.get('addCurrency');
 
     if (
+      addCurrencyControl.valid &&
       addSymbolControl.valid &&
-      searchSymbolControl.valid &&
+      searchSymbolControl.valid
-      addCurrencyControl.valid
     ) {
       return { atLeastOneValid: true };
     }
 
     if (
+      addCurrencyControl.valid ||
+      !addCurrencyControl ||
       addSymbolControl.valid ||
       !addSymbolControl ||
       searchSymbolControl.valid ||
-      !searchSymbolControl ||
+      !searchSymbolControl
-      addCurrencyControl.valid ||
-      !addCurrencyControl
     ) {
       return { atLeastOneValid: false };
     }
@@ -141,6 +137,7 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ settings }) => {
         this.customCurrencies = settings[PROPERTY_CURRENCIES] as string[];
+        this.changeDetectorRef.markForCheck();
       });
   }
 
@@ -156,4 +153,16 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
         }, 300);
       });
   }
+
+  get showCurrencyErrorMessage() {
+    const addCurrencyFormControl =
+      this.createAssetProfileForm.get('addCurrency');
+    if (
+      addCurrencyFormControl.hasError('minlength') ||
+      addCurrencyFormControl.hasError('maxlength')
+    ) {
+      return true;
+    }
+    return false;
+  }
 }

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

@@ -12,13 +12,14 @@
         [value]="mode"
         (change)="onRadioChange($event.value)"
       >
-        <mat-radio-button name="auto" value="auto"> Search </mat-radio-button>
+        <mat-radio-button name="auto" value="auto" />
+        <label class="m-0" for="auto" i18n>Search</label>
         <mat-radio-button class="ml-3" name="manual" value="manual">
-          Add Manually
         </mat-radio-button>
+        <label class="m-0" for="manual" i18n>Add Manually</label>
         <mat-radio-button class="ml-3" name="currency" value="currency">
-          Add Currency
         </mat-radio-button>
+        <label class="m-0" for="currency" i18n>Add Currency</label>
       </mat-radio-group>
     </div>
 
@@ -44,6 +45,18 @@
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Currency</mat-label>
           <input formControlName="addCurrency" matInput />
+          <mat-error
+            *ngIf="
+              createAssetProfileForm.get('addCurrency').hasError('required')
+            "
+            i18n
+          >
+            Currency is required.
+          </mat-error>
+          <mat-error *ngIf="showCurrencyErrorMessage" i18n>
+            {{ createAssetProfileForm.controls['addCurrency'].value }} is an
+            invalid currency! Should be of 3 characters only.
+          </mat-error>
         </mat-form-field>
       </div>
     }