feat(client): implement CreateWatchlistItemForm

apps/client/src/app/components/home-watchlist/create-watchlist-item-dialog/create-watchlist-item-dialog.component.ts

@@ -2,10 +2,8 @@ import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplet
 
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import {
-  AbstractControl,
   FormBuilder,
   FormControl,
-  FormGroup,
   FormsModule,
   ReactiveFormsModule,
   ValidationErrors,
@@ -14,6 +12,9 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { SymbolProfile } from '@prisma/client';
+
+import { CreateWatchlistItemForm } from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -31,7 +32,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
   templateUrl: 'create-watchlist-item-dialog.html'
 })
 export class GfCreateWatchlistItemDialogComponent implements OnInit {
-  public createWatchlistItemForm: FormGroup;
+  public createWatchlistItemForm: CreateWatchlistItemForm;
 
   public constructor(
     public readonly dialogRef: MatDialogRef<GfCreateWatchlistItemDialogComponent>,
@@ -41,7 +42,9 @@ export class GfCreateWatchlistItemDialogComponent implements OnInit {
   public ngOnInit() {
     this.createWatchlistItemForm = this.formBuilder.group(
       {
-        searchSymbol: new FormControl(null, [Validators.required])
+        searchSymbol: new FormControl<SymbolProfile | null>(null, [
+          Validators.required
+        ])
       },
       {
         validators: this.validator
@@ -56,18 +59,18 @@ export class GfCreateWatchlistItemDialogComponent implements OnInit {
   public onSubmit() {
     this.dialogRef.close({
       dataSource:
-        this.createWatchlistItemForm.get('searchSymbol').value.dataSource,
-      symbol: this.createWatchlistItemForm.get('searchSymbol').value.symbol
+        this.createWatchlistItemForm.controls.searchSymbol.value?.dataSource,
+      symbol: this.createWatchlistItemForm.controls.searchSymbol.value?.symbol
     });
   }
 
-  private validator(control: AbstractControl): ValidationErrors {
-    const searchSymbolControl = control.get('searchSymbol');
+  private validator(control: CreateWatchlistItemForm): ValidationErrors {
+    const searchSymbolControl = control.controls.searchSymbol;
 
     if (
       searchSymbolControl.valid &&
-      searchSymbolControl.value.dataSource &&
-      searchSymbolControl.value.symbol
+      searchSymbolControl.value?.dataSource &&
+      searchSymbolControl.value?.symbol
     ) {
       return { incomplete: false };
     }

apps/client/src/app/components/home-watchlist/create-watchlist-item-dialog/interfaces/interfaces.ts

@@ -1,4 +1,11 @@
+import type { FormControl, FormGroup } from '@angular/forms';
+import type { SymbolProfile } from '@prisma/client';
+
 export interface CreateWatchlistItemDialogParams {
   deviceType: string;
   locale: string;
 }
+
+export type CreateWatchlistItemForm = FormGroup<{
+  searchSymbol: FormControl<SymbolProfile | null>;
+}>;